'outter' > 'inner' > 1 'inner' > 2 .outter{display : flex;justify-content : space-between;width : 300px ;height : 200px ;background : pink;}.outter .inner{background : gray;width : 100px ;height : 100px ;}
- 弹性容器:包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
- 弹性项目(Flex item):弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性项目。也可以称为子容器。
- 轴(Axis):每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
- 方向(Direction):可以通过 flex-direction 来确定主轴和侧轴的方向。
默认情况下,主轴的方向是从左到右。在主轴方向上,可以通过 justify-content 属性来设置他们的排列方式。排列方式有以下几种:
1.flex-start :项目靠近父盒子的左侧。默认采用的就是这种排列方式。示例图如下:
2. flex-end :项目靠近父盒子的右侧
4. space-around :项目沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半
6. space-evenly :项目在主轴上均匀分布,收尾两端的自容器到父容器的距离跟自容器间的间距是一样的
2. flex-end :末尾段对齐
3. center :中间对齐
.outter .inner{background : gray;width : 100px ;/* height: 100px; */border : 1px solid #ccc ;}
效果图为:
'outter' > 'inner' > 'margin-top:10px;background:#eee;' > hello 'inner' > 2
.outter{ display: flex; align-items: baseline; width: 300px; height: 200px; background: pink; } .outter .inner{...}
主轴默认的方向是从左到右,侧轴的方向默认是从上到下,当然也可以进行修改。可以通过 flex-direction 进行修改。可以修改的参数为以下:
2. row-reverse :从右到左
3. column :从上到下
4. column-reverse :从下到上
'outter' > 'inner' > 1 'inner' > 2 'inner' > 3 'inner' > 4
.outter{ display: flex; width: 300px; height: 200px; background: pink; } .outter .inner{ background: gray; width: 100px; height: 100px; border: 1px solid #ccc; }
2. wrap :换行
在排列中,如果有多行,那么这个属性是设置多行之间的排列方式。可以通过 align-content 属性来确定排列的方式。可以设置以下值
.outter{ display: flex; flex-wrap: wrap; align-content: flex-start; width: 300px; height: 300px; background: pink; }
2. flex-end :末尾段对齐。效果图如下:
3. center :中点对齐。效果图如下:
4. space-between :与交叉轴两端对齐,轴线之间的间隔平均分布。效果图如下:
6. stretch :默认方式,如果没有给元素设置高度,那么会占满整个交叉轴
.outter .inner{ background: gray; width: 100px; /* height: 100px; */ border: 1px solid #ccc; box-sizing: border-box; }
效果图如下:
.item {flex-basis :| auto; }
'outter' > 'inner inner1' > 1 'inner inner2' > 2
.outter{display : flex;width : 300px ;height : 300px ;flex-wrap : wrap;background : pink;}.outter .inner{background : gray;width : 100px ;height : 100px ;border : 1px solid #ccc ;box-sizing : border-box;}.outter .inner1{flex-grow : 2 ;}.outter .inner2{flex-grow : 1 ;}
效果图为:
1 2
.outter .inner1{ flex-grow: 0; } .outter .inner2{ flex-grow: 1; }
效果图为:
如果把 inner1 的 width 删掉,那么效果图为:
1 2 3 4
.outter{ display: flex; width: 300px; height: 300px; background: pink; } .outter .inner{ background: gray; width: 100px; height: 100px; border: 1px solid #ccc; box-sizing: border-box; } .outter .inner2{ flex-shrink: 0; }
效果图为:
.item { flex : 1 ;}.item {flex-grow : 1 ;flex-shrink : 1 ;flex-basis : 0% ;}
.item { flex : 0 ;}.item {flex-grow : 0 ;flex-shrink : 1 ;flex-basis : 0% ;}
.item-1 { flex : 0% ;}.item-1 {flex-grow : 1 ;flex-shrink : 1 ;flex-basis : 0% ;}.item-2 { flex : 24px ;}.item-2 {flex-grow : 1 ;flex-shrink : 1 ;flex-basis : 24px ;}
.item { flex : 2 3 ;}.item {flex-grow : 2 ;flex-shrink : 3 ;flex-basis : 0% ;}
.item { flex : 11 32px ;}.item {flex-grow : 11 ;flex-shrink : 1 ;flex-basis : 32px ;}