CSS3图解伸缩性布局

CSS3伸缩性布局

flex

父盒子 section 需添加 伸缩布局模式 display: flex;

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

子盒子 div添加分数 flex

section div:nth-child(1) {
    background-color: pink;
    flex: 1;/*子盒子添加分数flex:1;不加单位*/
}
section div:nth-child(2) {
    background-color: rgb(255, 231, 93);
    flex: 2;
}
section div:nth-child(3) {
    background-color: rgb(135, 241, 103);
    flex: 3;
}
section div:nth-child(4) {
    background-color: rgb(104, 228, 250);
    flex: 1;
}

效果如图

flex简写—> flex: flex-grow、flex-shrink、flex-basis
默认值—> flex: 0 1 auto;

flex:1 相当于

flex-grow: 1;
flex-shrink: 1;
flex-basis: 1;

flex-grow —>可以来扩展子元素的宽度,设置当前元素应该占据剩余空间的比例值
flex-shrink —>定义收缩比例,通过设置值来计算收缩空间
flex-basis —>规定元素的基准值

flex-direction —>设置子元素的排列方向:主轴方向
默认主轴方向是row(水平方向):
：row(水平排列方向,从左到右)
：row-reverse(水平排列方向从右到左)
：column（设置主轴方向为纵向，垂直显示）
：column-reverse（与 column 相同，但是以相反的顺序）
父盒子添加flex-direction: row-reverse; 实现倒排

flex-wrap —>控制子元素是否换行显示,默认不换行
：nowrap(不换行)
：wrap(换行)
：wrap-reverse(翻转,原来从上到下,翻转后从下到上排列)
父盒子添加flex-wrap:wrap-reverse实现翻转

flex-flow —>flex-wrap和flex-direction的结合
父盒子添加flex-flow: wrap-reverse row-reverse 倒排+翻转

控制子项目的排列顺序: order
order---->正序方式排列,从小到大(可以为负数),例order：1;

justify-content

：flex-start（起始位置开始排列）
：flex-end（行尾对齐位置开始排列)
：center（中点位置开始排列，行首和行尾的距离相同）
：space-between（行首行尾分别左右对齐，中间相邻元素产生相同间距)
：space-around（中间的间距是行首的边距和行尾的边距的两倍)
：space-evenly（flex项都沿着主轴均匀分布在指定的对齐容器中，相邻flex项之间的间距都完全一样)

align-content （针对flex容器里面多轴(多行)的情况 ）

：flex-start（从起始点开始放置 flex元素）
：flex-end（从终止点开始放置 flex元素)
：center（将项目放置在中点）
：space-between（均匀分布项目，第一项与起始点齐平，最后一项与终止点齐平）
：space-around（均匀分布项目，项目在两端有一半大小的空间）
：space-evenly（均匀分布项目，项目周围有相等的空间）
：stretch（默认值，均匀分布项目，拉伸‘自动’-大小的项目以充满容器）

align-items （针对一行的情况进行排列）

：stretch（默认值，元素被拉伸以适应容器，侧轴大小的属性值为’auto’时，则会使项目的边距盒的尺寸尽可能接近所在行的尺寸）
：baseline（文本基线对齐）
：flex-start（侧轴方向上顶对齐）
：flex-end（侧轴方向上底对齐）
：center（侧轴方向上中对齐）

align-self

align-self 属性定义在 flex子项单独 在侧轴（纵轴）方向上的对齐方式。
注意：align-self 属性 可重写 灵活容器的 align-items 属性。
：auto（默认值，元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”）
：baseline（元素位于容器的基线上）
：stretch（元素被拉伸以适应容器）
：flex-start（侧轴方向上顶对齐）
：flex-end（侧轴方向上底对齐）
：center（侧轴方向上中对齐）