CSS3弹性盒模型flex box快速入门

骑猪看日落 2022-06-01 08:47 206阅读 0赞

为了做移动端的前端项目开始学flex啦～！用了flex，再也不用担心排版啦。一起来快速上手吧！

在css上使用flex的语法

如在下面html代码中, ul为父元素，li为子元素。

< ul  class ="example" >  
     < li >a </ li >  
     < li >b </ li >  
     < li >c </ li >  </ ul >

使用flex应在父元素中加入以下css样式：

![复制代码][copycode.gif]

.example \{   
    display:  flex;   
    display:  ">/\*  兼容chrome  \*/   
    display:  -moc-flex; /\*  兼容firefox  \*/   
    display:  -o-flex; /\*  兼容opera  \*/   
 \}

![复制代码][copycode.gif]

flex-direction  
(适用于父类容器元素)

flex-direction:row;

*  a
 *  b
 *  c

flex-direction:row-reverse;

*  a
 *  b
 *  c

flex-direction:column;

*  a
 *  b
 *  c

flex-direction:column-reverse;

*  a
 *  b
 *  c

flex-wrap  
(适用于父类容器元素)

设置或检索伸缩盒对象的子元素超出父容器时是否换行。  
flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap:nowrap;

*  a
 *  b
 *  c

flex-wrap:wrap;

*  a
 *  b
 *  c

flex-wrap:wrap-reverse;

*  a
 *  b
 *  c

flex-flow  
(适用于父类容器元素)

相当于direction和wrap的集合  
flex-flow: row nowrap; /\* 顺序排列且不换行 \*/  
flex-flow:row-reverse wrap; /\* 反序排列且自动换行 \*/

justify-content  
(适用于父类容器元素)

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。  
justifu-content: flex-start | flex-end | center | space-between | space-around

justify-content:flex-start;

*  a
 *  b
 *  c

justify-content:flex-end;

*  a
 *  b
 *  c

justify-content:center;

*  a
 *  b
 *  c

justify-content:space-between;  
space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

*  a
 *  b
 *  c

justify-content:space-around;  
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

*  a
 *  b
 *  c

align-items  
(适用于父类容器元素)

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。  
align-items: flex-start | flex-end | center | baseline | stretch

align-items:flex-start;

*  a
 *  b
 *  c

align-items:flex-end;

*  a
 *  b
 *  c

align-items:center;

*  a
 *  b
 *  c

align-items:baseline;  
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

*  a
 *  b
 *  c

align-items:strecth;  
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

*  a
 *  b
 *  c

align-content  
(适用于父类容器元素)

align-content:flex-start;