目录
一、属性介绍
1.1、justify-content
- flex-start:默认值,伸缩项目向一行的起始位置靠齐;
- flex-end:伸缩项目向一行的结束位置靠齐;
- center:项伸缩项目向一行的中间位置靠齐;
- space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置;
- space-around:伸缩项目会平均地分布在行里,两端保留一半的空间;
- initial:设置该属性为它的默认值;
- inherit:从父元素继承该属性。
1.2、align-items
- stretch:默认值,项目被拉伸以适应容器;
- center:项目位于容器的中心;
- flex-start:项目位于容器的开头;
- flex-end:项目位于容器的结尾;
- baseline:项目位于容器的基线上;
- initial:设置该属性为它的默认值;
- inherit:从父元素继承该属性。
1.3、flex-direction
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。
/* The direction text is laid out in a line */ flex-direction: row; /* Like <row>, but reversed */ flex-direction: row-reverse; /* The direction in which lines of text are stacked */ flex-direction: column; /* Like <column>, but reversed */ flex-direction: column-reverse; /* Global values */ flex-direction: inherit; flex-direction: initial; flex-direction: unset;
请注意,值 row 和 row-reverse 受 flex 容器的方向性的影响。 如果它的 dir 属性是 ltr,row 表示从左到右定向的水平轴,而 row-reverse 表示从右到左; 如果 dir 属性是 rtl,row 表示从右到左定向的轴,而 row-reverse 表示从左到右。
1.4、flex-wrap
flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行,这个属性允许你控制行的堆叠方向。
flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: unset;
1.5、flex
Value: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
Initial: 0 1 auto
Applies to: flex items
二、实现水平垂直居中效果
对父元素添加下面的样式即可。
.container { // 创建flex容器 display: flex; // 竖直垂直居中 align-items: center; // 水平居中 justify-content: center; }
三、实现竖向九宫格
要求:使用flexbox布局将9个格子排列成3*3的九宫格,且第一列排完才排第二列。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flexbox竖向九宫格</title> <style> html { font-family: sans-serif; } body { margin: 0; } .boxs-wrapper { display: flex; flex-direction: column; flex-wrap: wrap; height: 320px; width: 320px; margin: 0 auto; } .box { background: aqua; height: 100px; width: 100px; text-align: center; line-height: 100px; margin: 0 10px 10px 0; } .box:nth-of-type(3n) { margin-bottom: 0; } .box:nth-of-type(n+7) { margin-right: 0; } </style> </head> <body> <section class="boxs-wrapper"> <article class="box">1</article> <article class="box">2</article> <article class="box">3</article> <article class="box">4</article> <article class="box">5</article> <article class="box">6</article> <article class="box">7</article> <article class="box">8</article> <article class="box">9</article> </section> </body> </html>