一、伸缩布局
给父级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控制子项目的排列顺序,正序方式排序,从小到大
此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值