弹性布局定义
CSS3 弹性盒子（ Flexible Box） 也叫 弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
优缺点
优点：1 、布局方式多种多样，包含了很多其他布局方式的特性
2、相对于使用浮动，更加方便，也少了清除浮动等麻烦
3、 应用恰当的弹性布局对用户十分友好。页面中所有的元素可以随着用户的偏好缩放。
缺点：
1、因为布局样式的多种多样，就需要花很多时间去理解和测试。布局难度相对较大
弹性盒子内容
弹性盒子可以简单分为弹性容器和容器成员
容 器：给一个盒子设置display:flex属性或 inline-flex 后，它就变成了弹性容器（flex container）
容器成员：它的所有子元素自动成为容器成员，称为flex弹性元素 （不包括孙元素和绝对定位元素），弹性布局只会修改子元素的布局方式
一、容器
弹性布局也可以大体分为主轴方向和辅轴方向
1、flex元素在辅轴之间的排列方式
①、主轴排列方向：flex-direction
flex-direction: row ---默认， 主轴方向为水平，flex元素从左往右排列
flex-direction: row-reverse --- 主轴方向为水平，flex元素从右往左排列
flex-direction: column ---主轴方向为垂直，flex元素从上往下排列
flex-direction:column-reverse ---主轴方向为垂直，flex元素从下往上排列
②、主轴方向的换行
flex-wrap: nowrap ---默认，flex元素的总宽度超过flex容器时不会换行，flex元素的宽度会自动伸缩
flex-wrap: wrap ---flex元素的总宽度超过flex容器时会换行，flex元素宽度不变
flex-wrap:wrap-reverse ---反转换行，（较少使用）
③、简写
flex-direction: row; flex-wrap: wrap; 等同于flex-flow: row wrap;
flex-flow 是flex-direction和flex-wrap的简写形式，默认值为row nowrap
④、控制子盒子在主轴上的分布
justify-content：---flex元素在主轴上的分布
justify-content: flex-start; ---(默认) 从主轴前面开始
justify-content: flex-end; ---从主轴的后面开始
justify-content: center; ---在主轴的中间居中排列
justify-content: space-between; ---两端分布盒子与盒子之间留有相同空白
justify-content: space-around; ---两端分布每个盒子左右两边都有相同的外间隔，且两个子盒子之间的外间隔不会重叠
justify-content: space-evenly; ---均匀分布，每个flex元素的间隔相等
2、 flex元素在辅轴之间的排列方式
align-content：flex元素在辅轴上的分布（以下例子主轴排列为 justify-content: flex-start;）
align-content: stretch; ---当flex元素没有设置高度或高度设置为auto时,将flex元素的高度伸展
align-content: flex-start; ---从辅轴开头开始
align-content: flex-end; ---从辅轴后面开始
align-content: center; ---在辅轴上居中排列
align-content: space-between; ---两端分布盒子与盒子之间留有相同空白
align-content: space-around; ---两端分布每个盒子左右两边都有相同的外间隔，且两个子盒子之间的外间隔不会重叠
align-content: space-evenly; ---均匀分布，每个flex元素的间隔相等
3、flex元素之间的对齐方式
align-items :flex元素之间的对齐方式
align-items: stretch; ---当flex元素没有设置高度或高度设置为auto时,将flex元素的高度伸展
（如果其中有一个设置了高度，则伸展长度为设置高度中的最大值）
align-items: flex-start; ---顶部对齐
align-items: flex-end; ---底部对齐
align-items: center; ------居中对齐
align-items: baseline; ---沿第一行文字的基线对齐
align-self: ---设置单个flex元素的对齐方式，可以覆盖align-items的属性
auto ---默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch ---元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center ---元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start ---元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end ---元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline ---元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
order ---定义flex元素的排列顺序，数值越小排列越靠前，默认为0， 只能是整数
flex-grow ---当flex容器有剩余空间时， flex元素如何分配剩余的空间 ，默认0， 不放大，不占据剩余空间/1， 放大，占据剩余空间
flex-shirnk ---当flex容器空间不足时， flex元素是否缩小,默认1， flex元素等比例缩小 / 0， 不缩小
flex-basis ---flex元素本来的大小
简写： flex-grow: 1; flex-shrink: 1; flex-basis: auto 简写： flex: 1 1 auto;
网友评论