CSS3的伸缩布局提供了强大的灵活性，用于块级元素的响应式布局。主轴默认水平，侧轴默认垂直，可通过flex-direction改变。关键属性包括justify-content（主轴对齐）、align-items（侧轴对齐）、flex-wrap（换行）和align-content（多行垂直对齐）。order属性控制子元素排列顺序，数值小的在前，可用于创建自定义排列。
css3在布局方面做了非常大的改进，使的我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 80%; /* 用百分比可以缩放 */
height: 200px;
border: 1px solid skyblue;
margin: 100px auto;
/* 给父级盒子添加flex属性 */
display: flex; /* 伸缩布局模式 */
}
section div {
/* width: 33.33%; */
height: 100%;
/* flex: 1; */ /* 子盒子添加份数 不跟单位 每个人 各占一等分*/
/* float: left; */
/* margin:0 5px; 容易出问题 */
}
section div:nth-child(1) {
background-color: skyblue;
flex: 1;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 2;
}
section div:nth-child(3) {
background-color: gray;
flex: 1;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>3</div>
</section>
</body>
</html>
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px; 盒子最小宽度不能小于280
max-width 最大值 min-width:1280px; 最大宽度不能大于1280
2.flex-direction调整主轴方向（默认为水平方向）
（flex-direction: column; 垂直排列 column-reverse 翻转 颠倒 从下向上）
（flex-direction: row; 水平排列 row-reverse 对齐方式与row相反 从右到左）
justify-content调整主轴对齐（水平对齐）
| 值 | 描述 | 白话文 |
| flex-start | 默认值，项目位于容器的开头，让子元素从父容器的开头排序 | 让子元素从父容器的开头开始排序 |
| flex-end | 项目位于容器的结尾 | 让子元素从父容器的后面开始排序 |
| center | 项目位于容器的中心 | 让子元素位于父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内 | 相当于给每个盒子添加了左右margin外边距 |
4.align-items调整侧轴对齐
5.flex-wrap控制是否换行
6.align-content堆栈（由flex-wrap产生的独立行）对齐
7.flex-flow啊flex-direction、flex-wrap的简写形式
8.order控制子项目的排列顺序，正序方式排列，从小到大
需找出主轴、侧轴、方向、各属性对应的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 1000px;
height: 300px;
border: 2px solid skyblue;
margin: 100px auto;
display: flex;
/* justify-content: flex-start; */ /* 让子元素从父容器的开头排序 */
/* justify-content: flex-end; 让子元素从父容器的后面开始排序 但是盒子的顺序不变 */
/* justify-content: center; 让子元素位于父容器中间显示 */
/* justify-content: space-between; 左右的盒子贴近父盒子，中间的平均分布空白间距 */
justify-content: space-around; /* 相当于给每个盒子添加了左右margin外边距 */
}
div {
width: 250px;
height: 100%;
}
div:first-child {
background-color: skyblue;
}
div:nth-child(2) {
background-color: gray;
}
div:nth-child(3) {
background-color: #87CEEB;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>t</div>
</section>
</body>
</html>
align-items调整侧轴对齐（垂直对齐）
| 值 | 描述 | 白话文 |
| stretch | 默认值，项目被拉伸以适应容器 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下） |
| center | 项目位于容器的中心 | 垂直居中 |
| flex-start | 项目位于容器的开头 | 垂直对齐开始位置 相当于上对齐 |
| flex-end | 项目位于容器的结尾 | 垂直对齐结束位置 相当于下对齐 |
flex-wrap
| 值 | 描述 |
| nowrap | 默认值，规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示 强制一行内显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列 （换行） |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序（翻转） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 1000px;
height: 600px;
border: 2px solid skyblue;
margin: 100px auto;
display: flex;
/* justify-content: flex-start; */ /* 让子元素从父容器的开头排序 */
/* justify-content: flex-end; 让子元素从父容器的后面开始排序 但是盒子的顺序不变 */
/* justify-content: center; 让子元素位于父容器中间显示 */
/* justify-content: space-between; 左右的盒子贴近父盒子，中间的平均分布空白间距 */
justify-content: space-around; /* 相当于给每个盒子添加了左右margin外边距 */
/* 垂直对齐 */
/* align-items: flex-start; 上对齐 */
/* align-items: flex-end; 低对齐 */
/* align-items: center; 垂直居中 */
align-items: stretch;
/* 让子元素的高度拉伸适用父容器（子元素不给高度的前提下） 相当与height: 100%;*/
/* 规定灵活的项目不拆行或不拆列. 不换行,则收缩(压缩)显示强则一行内显示 */
flex-wrap: nowrap;
/* flex-wrap: wrap; 换行 */
/* flex-wrap: wrap-reverse; 翻转 */
}
div {
width: 250px;
/* height: 200px; */
}
div:first-child {
background-color: skyblue;
}
div:nth-child(2) {
background-color: gray;
}
div:nth-child(3) {
background-color: #87CEEB;
}
div:nth-child(4) {
background-color: purple;
}
div:nth-child(5) {
background-color: pink;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>t</div>
<div>4</div>
<div>5</div>
</section>
</body>
</html>
align-content 堆栈（由flex-wrap产生的独立行）多行垂直对齐方式
align-content是针对flex容器里多轴（多行）的情况，align-items是针对一行的情况进行排列
必须对父元素设置自由盒属性display: flex;并且设置排列方式为横向排列flex-direction;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用
| 值 | 描述 |
| stretch | 默认值，项目被拉伸以适应容器 |
| center | 项目位于容器中心 |
| flex-start | 项目位于容器的开头 |
| flex-end | 位于容器的结尾 |
| space-between | 项目位于各行之间留有空白的容器内 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 1000px;
height: 600px;
border: 2px solid skyblue;
margin: 100px auto;
display: flex;
flex-flow: row wrap; /* 这句话必须有否者不起效果 */
/* flex-direction: row; */
/* align-content: center; */
align-content: space-around;
}
div {
width: 250px;
height: 200px;
}
div:first-child {
background-color: skyblue;
}
div:nth-child(2) {
background-color: gray;
}
div:nth-child(3) {
background-color: #87CEEB;
}
div:nth-child(4) {
background-color: purple;
}
div:nth-child(5) {
background-color: pink;
}
div:nth-child(6) {
background-color: purple;
}
div:nth-child(7) {
background-color: greenyellow;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>t</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</section>
</body>
</html>
order控制子项目的排列顺序，正序方式排序，从小到大
用css来控制盒子的前后顺序。用order就可以
都默认为0
用整数值来定义排列顺序，数值小的排在前面，大的排在后面。可以为负值，默认值为0
order: 1;
扫一扫
2132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
