CSS学习18--伸缩布局
伸缩布局
- 一、伸缩布局
- 二、属性设置
一、伸缩布局
给父级display: flex;
给孩子flex: 1;
自由变动
<html><head><style>section {width: 1000px;height: 200px;border:1px solid pink;margin:100px auto;/*父级盒子添加f1ex*/dispLay:flex;/*伸缩布局模式*/}section div {height:100%;/*flex:1子盒子添加份数*/}section div:nth-child(1){background-color:pink;flex:1}section div:nth-child(2){background-color:purple;margin:0 5px;flex:2 /*不加单位！*/}section div:nth-child(3){background-color:pink;flex:1}</style></head><body><section><div></div><div></div><div></div></section>
</html>
二、属性设置
-
flex子项目在主轴的缩放比例，不指定f1ex属性，则不参与伸缩分配。
- min-width 最小值
min-width:280px 最小宽度不能小于280
max-width:1280px最大宽度不能大于1280 - 直接设定width则不变化
- min-width 最小值
-
flex-direction 调整主轴方向（默认为水平方向）
flex-direction:column; 垂直排列
flex-direction:row; 水平排列
flex-direction:row-reverse; 水平翻转 -
justify-content 调整主轴对齐（水平对齐）
- flex-start 默认值。项目位于容器的开头。让子元素从父容器的开头排序，让子元素从父容器的开头开始排序
- flex-end 项目位于容器的结尾。让子元素从父容器的后面开始排序
- center 项目位于容器的中心。让子元素在父容器中间显示
- space-between 项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子，中间的平均分布空白间距
- space-around 项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距
-
align-items 调整侧轴对齐（垂直对齐）
- stretch 默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器（子元素不给高度的前提下）
- center 项目位于容器的中心。垂直居中
- flex-start 项目位于容器的开头。垂直对齐开始位置
- flex-end 项目位于容器的结尾。垂直对齐结束位置
-
flex-wrap控制是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理- nowrap 默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示
- wrap 规定灵活的项目在必要的时候拆行或拆列。
- wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
-
flex-flow是flex-direction、flex-wrap的简写形式
-
align-content堆栈（由flex-wrap产生的独立行）对齐
align-content是针对flex容器里面多轴（多行）的情况，align-items是针对一行的情祝进行排列。
必须对父元素设置自由盒属性display:flex,并且设置排列方式为横向排列fHex-direction:row并且设置换行，flex-wrap:wrap;这样这个属性的设
置才会起作用。 -
order控制子项目的排列顺序，正序方式排序，从小到大
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值