CSS3弹性盒子

目录

一、定义

二、作用

三、flex-direction

作用：

属性值：

row(默认):

row-reverse ：

column ：

 column-reverse：

四、justify-content

作用：

属性：

flex-start     

默认，顶端对齐，例，主轴为X轴时

 flex-end             

center                

space-between  

space-around    

五、align-items   

作用：

属性值：

flex-start       

flex-end        

center          

baseline        

stretch          

六、flex-wrap

作用：

属性值

nowrap             

wrapflex            

wrap-reverse    

七、align-content   

作用：

属性值：

flex-start           

flex-end            

center              

space-between  

space-around   

八、align-self

作用：

属性值：

auto          

stretch      

center       

flex-start    

flex-end     

九、order

作用：

十、flex   

属性值：

flex-grow       

flex-shrink     

flex-basis      

flex:1            

复合式写法   

---

一、定义

        弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间，我们在一个盒子样式中设置以下代码，就能让盒子变为弹性盒子，从而控制子元素

display:flex

二、作用

让子元素都按照【主轴排列】，也能让里面所有的子元素都能设置宽度并且在里面只有设置margin:auto就能使元素垂直水平居中等等

三、flex-direction

作用：

改变主轴

属性值：

row(默认):

默认x轴为主轴，横向排列，例

                             
row-reverse ：

反转横向排列，例

column ：

y轴为主轴，纵向排列，例

 column-reverse：

 反转纵向排列，从下往上排，最后一项排在最上面 

 

四、justify-content

作用：

元素在主轴上的对齐方式

属性：

flex-start     

默认，顶端对齐，例，主轴为X轴时

 

 
flex-end             

末端对齐，例，主轴为X轴时

center                

居中对齐，例，主轴为X轴时

 

space-between  

两端对齐，中间自动分配，例，主轴为X轴时

 

space-around    

自动分配距离，例，主轴为X轴时

 

五、align-items   

作用：

元素在侧轴上的对齐方式

属性值：

flex-start       

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。顶部显示，例，主轴为X轴时

flex-end        

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。例，主轴为X轴时

 

center          

弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。例，主轴为X轴时

 

baseline        

如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 当子元素被padding撑开时，不与flex-start等效。例，主轴为X轴时

stretch          

默认值，拉伸，在没有设置子元素时，将高拉伸为父元素高。例，主轴为X轴时

 

六、flex-wrap

作用：

控制是否换行

属性值

nowrap             

默认值，flex容器为单行。该情况下flex子项可能会溢出容器

wrapflex            

容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse    

反转 wrap 排列。

tip：当父元素有高度时，换行自带行间距

七、align-content   

作用：

调整行与行之间的对齐方式，但是只针对在有多行的情况下

属性值：

flex-start           

没有行间距

flex-end            

底对齐没有行间距

center              

 居中没有行间距

space-between  

两端对齐，中间自动分配

space-around   

自动分配距离

八、align-self

作用：

写在子元素上面，控制某一个子元素在侧轴的对齐方式

属性值：

auto          

默认值。

stretch      

元素被拉伸以适应容器

center       

元素位于容器的中心

flex-start    

元素位于容器的开头

flex-end     

元素位于容器的结尾

九、order

作用：

排列顺序 ---  排序优先级，数字越大越往后排，默认为0，支持负数。

十、flex   

复合属性

属性值：

flex-grow       

拉伸，默认值为0，子元素宽高加起来小于父元素宽高，要有剩余空间，才会有效果，拉伸是宽是高跟主轴有关

flex-shrink     

元素宽高超出父元素宽高才有效。为0时，无变化

flex-basis      

项目长度

flex:1            

将弹性盒主轴上剩余的空间全部分配给当前元素

复合式写法   

 flex:0 1 auto; 参数分别代表flex-grow、flex-shrink、flex-basis