弹性盒模型

弹性盒模型

 

在容器上设置样式：（给父元素设置的样式）

display:flex;（这是打开弹性盒子模型的开关）

flex-direction 容器内元素的排列方向（默认横向排列）、属性值：row（默认值、沿水平主轴让元素从左向右排列） | row-reverse（沿水平主轴让元素从右向左排列） | column（让元素沿垂直主轴从上到下垂直排列） |column-reverse（让元素沿垂直主轴从下到上垂直排列）

flex-wrap（容器内元素的换行）1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

justify-content  元素在主轴（页面）上的排列

center（元素在主轴上的居中排列）

flex-start   元素在主轴页面上由左或者上开始排列

flex-end    元素在主轴页面上由右或者下开始排列

space-between  元素在主轴页面上左右两端或者上下 两端开始排列

space-around   每个元素两侧的间隔相等，所以，元素之间的间隔比元素与边框的间隔大一倍

align-items  元素在主轴页面当前行的纵轴（横轴）方向上的对齐方式

align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。

align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

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