移动端布局--flex弹性盒子

flex弹性盒子布局介绍

1. 什么是伸缩布局(弹性布局)

是CSS3中一种新的盒子模型-伸缩盒子模型.是block,inline-block,line的基础上延伸出来的新一代布局模式

 

特点:a.伸缩盒子最大的特点就是把控件可以最合理高效的方式分配给每一个子盒子

b.当伸缩盒子中所有的子元素总宽 大于flex伸缩盒子宽高是,子元素并不会超出,flex盒子会自动按照每一个子元素的宽高比例合理分配

   注意:

    1.弹性盒子控制子元素布局,只对亲儿子有效

    2.弹性盒子的子元素也可以作为弹性盒子使用

    3.弹盒子不脱标,如果父元素不设置高度,里边的子元素会把高度撑开

   4.父元素弹性盒子,里边的子元素不用考虑显示模式,都可以设置宽

3.给父盒子设置的属性

display:flex让一个盒子变成弹性盒子

justify-content：flex-start | flex-end | center | space-between | space-around

适用于:单行子元素主轴对齐

flex-start   默认值  主轴开始的位置对齐

flex-end    主轴结束的位置对齐

center     主轴居中对齐

space-between 两端对齐,中间等距

space-around   两端距离是中间间距的一半

注意:子元素的宽度相加超过父元素的宽度,不会自动换行

flex-wrap：nowrap | wrap | wrap-reverse

nowrap：flex容器为单行。该情况下flex子项可能会溢出容器

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

wrap-reverse：反转 wrap 排列。 

align-items：flex-start | flex-end | center | baseline | stretch

适用于:单行子元素侧轴对齐

stretch   默认值  拉伸(子元素不设置高度或者为auto)

flex-start   侧轴开始的位置对齐

flex-end   侧轴结束的位置对齐

center     侧轴居中对齐

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

align-content：flex-start | flex-end | center | space-between | space-around | stretch

适用于：多行的弹性盒模型容器

stretch   默认值  拉伸(子元素不设置高度或者为auto)

flex-start   默认值  主轴开始的位置对齐

flex-end    主轴结束的位置对齐

center     主轴居中对齐

space-between 两端对齐,中间等距

space-around   两端距离是中间间距的一半

flex-direction：row | row-reverse | column | column-reverse

row： 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。

row-reverse： 对齐方式与row相反。

column： 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。

column-reverse  对齐方式与column相反

 

 

flex 给子盒子设置的属性

align-self:设置单个子元素在侧轴方向的对齐方式,作用是覆盖父元素的align-items

order:设置子元素的排序方式,默认值都是0.从小到大排序

 

align-self：auto | flex-start | flex-end | center | baseline | stretch

auto： 如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

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

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

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