目录
flex布局（Flexible 布局，弹性布局）是目前web前端、小程序中非常流行的布局方式。
Flex 官方文档
如何在页面中开启Flex布局？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.container{
margin: 50px auto;
border: 1px solid red;
width: 500px;
height: 700px;
/* 开启父元素的flex布局方式 当父元素开启了flex布局方式，那么他的所有子元素都会默认从左到右进行排列*/
display: flex;
}
.item{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>这里我们在父容器（container）设置它的 display: flex; 或者 display: inline-flex; 这样我们就开启了flex布局。只要开启了flex布局后，那么里面的所有项都会默认从左到右进行排列。
- flex 父容器会以块级元素进行存在。那么当这个父容器后面如果还有其他元素，那么会自动换行到下行显示。
- inline-flex 父容器会以行级元素进行存在。那么当这个父容器后面如果还有其他元素，那么会自动跟着父容器进行显示
flex布局模型
常用CSS属性
flex container
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
flex-direction
父容器中的所有直接子元素（flex item）默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布。
flex-direction决定了 main axis的方向，有4个取值：row（默认值）、row-reverse、column、column-revese
justify-content
设置父容器的内的直接子元素（flex items）在main axis上的对齐方式。
- flex-start（默认值）：起始元素与 main start对齐
- flex-end：起始元素与 main end 对齐
- center：居中对齐
- space-between:
- flex items 之间的距离相等
- 与 main start、main end 两端对齐
-
space-evenly:
-
flex items 之间的距离相等
-
flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离
-
-
space-around
- flex items 之间的距离相等
- flex items 与 main start、main end 之间的距离 是于 flex items 之间的一半距离
align-items
设置父容器的内的直接子元素（flex items）在cross axis上的对齐方式。
- stretch（默认值）：当前 flex items 在cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container。
- flex start：起始元素与 cross start 对齐。
- flex end：起始元素与 cross end 对齐。
- center：居中对齐
- baseline：与基准线对齐
flex-warp
设置 flex container （父容器）中的 flex item （子元素） 是单行还是多行排列。
- nowrap（默认）：单行。如果所有元素之和超出了父容器的宽度，那么就会“挤在一起”显示。
- wrap：多行
- wrap-reverse：多行（对比wrap，cross start 与 cross end 相反）
flex-flow
flex-flow是flex-direction || flex-wrap的简写
- 比如：flex-flow：column wrap 等价于
- flex-direction：colunm
- flex-wrap：wrap
- 比如 flex-flow：row-reverse等价于
- flex-direction：row-reverse
- flex-wrap：nowrap 由于nowrap是默认值
- 比如 flex-flow：wrap 等价于
- flex-direction：row 由于row是默认值
- flex-wrap：wrap
align-content
align-content决定了多行 flex-items 在 cross axis 上的对齐方式，用法与justify-content类似。
- stretch（默认值）：与align-items的stretch类似
- flex-start：与cross start对齐
- flex-end 与cross end 对齐
- center：居中对齐
- space-between：
- flex-item 之间的距离相等
- 与cross start、cross end 两端对齐
- space-around：
- flex-item 之间的距离相等
- flex-item 与cross start、cross end 之间的距离是 flex item 之间距离的一半
- space-evenly:
- flex-item 之间的距离相等
- flex-item 与cross start、cross end 之间的距离 等于 flex-item 之间的距离
flex item
- flex
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
order
order 决定了 flex items 的排布顺序
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
- 默认值是0
align-self
flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
- auto（默认值）：遵从 flex container 的align-items 设置
- stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致
flex-grow
flex-grow决定了 flex items 如何扩展
可以设置任意非负数字（正小数、正整数、0），默认值是0
当flex container 在main axis 方向上有剩余size 时，flex-grow 属性才会有效
- 如果所有 flex items 的 flex-grow 总和 sum 超过1，每个 flex item 扩展的 size 为 flex container 的剩余 size*flex-grow/sum
/* 父容器 */
.container {
margin: 50px auto;
border: 1px solid red;
width: 500px;
height: 700px;
/* 开启父元素的flex布局方式 当父元素开启了flex布局方式，那么他的所有子元素都会默认从左到右进行排列*/
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
/* 子元素 */
.item {
width: 100px;
height: 100px;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 100px;
/* 设置字体大小 */
font-size: 30px;
/* 字体颜色 */
color: wheat;
}
.item:nth-of-type(1) {
background-color: red;
/*
扩展的宽度是： (500-400)* 1/ (1+2+3+1)=14.28
*/
flex-grow: 1;
}
.item:nth-of-type(2) {
background-color: green;
/*
扩展的宽度是： (500-400)* 2/ (1+2+3+1)=28.58
*/
flex-grow: 2;
}
.item:nth-of-type(3) {
background-color: blue;
/*
扩展的宽度是： (500-400)* 3/ (1+2+3+1)=42.86
*/
flex-grow: 3;
}- 如果所有 flex items 的 flex-grow 总和不超过1， 每个 flex item扩展的size 为 flex container的剩余size* flex-grow
/* 父容器 */
.container {
margin: 50px auto;
border: 1px solid red;
width: 500px;
height: 700px;
/* 开启父元素的flex布局方式 当父元素开启了flex布局方式，那么他的所有子元素都会默认从左到右进行排列*/
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
/* 子元素 */
.item {
width: 100px;
height: 100px;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 100px;
/* 设置字体大小 */
font-size: 30px;
/* 字体颜色 */
color: wheat;
}
.item:nth-of-type(1) {
background-color: red;
/*
扩展的宽度是： (500-400)* 0.1=10
*/
flex-grow: 0.1;
}
.item:nth-of-type(2) {
background-color: green;
/*
扩展的宽度是： (500-400)* 0.2=20
*/
flex-grow: 0.2;
}
.item:nth-of-type(3) {
background-color: blue;
/*
扩展的宽度是： (500-400)* 0.3=30
*/
flex-grow: 0.3;
}
.item:nth-of-type(4) {
background-color: rgb(78, 78, 6);
/*
扩展的宽度是： (500-400)* 0.1=10
*/
flex-grow: 0.1;
}flex items 扩展后的最终size 不能超过 max-width\max-height
flex-shrink
flex-shrink 决定了 flex items 如何收缩
可以设置任意非负数字（正小数、正整数、0），默认值是1
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
每个 flex item 收缩的size为
flex items 超出 flex container 的 size*收缩比例 / 所有 flex items 的收缩比例之和
收缩比例 = flex-shrink * flex item 的 base size
base size 就是 flex item 放入 flex container 之前的size
flex items 收缩后的最终 size 不能小于 min-width\min-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
/* 父容器 */
.container {
margin: 50px auto;
border: 1px solid red;
width: 500px;
height: 700px;
/* 开启父元素的flex布局方式 当父元素开启了flex布局方式，那么他的所有子元素都会默认从左到右进行排列*/
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
}
/* 子元素 */
.item {
width: 100px;
height: 100px;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 100px;
/* 设置字体大小 */
font-size: 30px;
/* 字体颜色 */
color: wheat;
}
.item:nth-of-type(1) {
background-color: red;
(600-500)*(100*1)/(100*1+100*2+100*3+100*4+100*5+100*6)
flex-shrink: 1;
}
.item:nth-of-type(2) {
background-color: green;
(600-500)*(100*2)/(100*1+100*2+100*3+100*4+100*5+100*6)
flex-shrink: 2;
}
.item:nth-of-type(3) {
background-color: blue;
(600-500)*(100*3)/(100*1+100*2+100*3+100*4+100*5+100*6)
flex-shrink: 3;
}
.item:nth-of-type(4) {
background-color: rgb(78, 78, 6);
(600-500)*(100*4)/(100*1+100*2+100*3+100*4+100*5+100*6)
flex-shrink: 4;
}
.item:nth-of-type(5) {
background-color: rosybrown;
(600-500)*(100*5)/(100*1+100*2+100*3+100*4+100*5+100*6)
flex-shrink: 5;
}
.item:nth-of-type(6) {
background-color: rgb(38, 38, 16);
(600-500)*(100*6)/(100*1+100*2+100*3+100*4+100*5+100*6)
flex-shrink: 6;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
div后面的内容
</body>
</html>
flex-basis
flex-basis 用来设置 flex-items 在 main axis 方向上的 base size
auto（默认值）、content：取决于内容本身的size
- 决定 flex items 最终 base size 的因素，从优先级高到低
- max-width \ max-height \ min-width \min-height
- flex-basis
- width \ height
- 内容本身的 size
flex
flex 是 flex-grow flex-shrink ？ || flex-basis 的简写
默认值是 0 1 auto
none ：0 0 auto
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
