本文详细介绍了CSS3弹性盒flex布局的原理、重要概念、关键属性如flex-direction、flex-wrap、justify-content等，以及如何在实际项目中应用和调整flexitem的布局。
flex布局的出现
所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了;
Nature and nature’s laws lay hid in night; God said “Let Newton be” and all was light.
自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧！于是世界就明亮了起来.
flexbox在使用时, 我们最担心的是它的兼容性问题:
我们可以在caniuse上查询到具体的兼容
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
认识flex布局
- 弹性盒子是一种用于按行或按列布局元素的一推布局方法
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
- 通常我们使用flexbox来进行布局的方案称之为flex布局(FLEX layout)
flex布局目前web开发中使用最多的方案布局： flex布局（flexible布局，弹性布局）
目前特别在移动端可以说完全普及
在pc端也几乎已经完全普及和使用，只有非常少数的网站依然在使用浮动来布局；
为什么需要flex布局：
- css布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
- 但是这两种方法本身存在很大的局限性，并且他们用于布局实在是无奈之举；
- 有人会说那京东，淘宝，考拉等网站还在用浮动呢？
- 是因为这些公司考虑的特别长远，电脑低版本仍然可以用户打开他们公司的网站，所以从各方面来说flex兼容性低于浮动的兼容性。
弹性盒子的内容
flex布局的重要概念
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
开启了flex布局的元素叫flex container，flex container 里面的直接子元素叫做flex item，当flex container中的子元素变成了flex item时，具备以下的特点：
- flex item 的布局将受到flex container 属性的设置来进行控制和布局
- flex item不在严格区分块级元素和行内级元素 flex item默认情况下包裹内容的，但是可以设置宽度和高度；
设置display属性flex或者inline-flex可以成为flex container
flex：flex container以block-level形式存在
inline-flex：flex container以inline-level形式存在
display：
用于标准流：block/inline-block/inline/none 弹性盒子：flex/inline-flex
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.box{
display: flex;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
bbbbbb
</div>
</body>
</html>
代码运行结果:
加入：
box {
display: flex;
background-color: #f00;
}
当把box的盒子增加display：flex属性，颜色为#f00，它会独占一行，不在严格区分是否为行内级元素，但外面的盒子还是会进行独占一行。
如果有多个item会怎么样呢？
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
会被进行挤压，设置这个属性：flex-wrap: wrap;
flex布局的模型
应用在 flex container 上的 CSS 属性
flex-flow
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
应用在 flex items 上的 CSS 属性
flex-grow
flex-basis
flex-shrink
order
align-self
flex
flex–direction
flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布
flex-direction 决定了 main axis 的方向，有 4 个取值
row（默认值）、row-reverse、column、column-reverse
实例代码
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devic-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 300px;
height: 300px;
background-color: orange;
display: flex;
}
.item {
width: 120px;
height: 120px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item1">2</div>
<div class="item item1">3</div>
<div class="item item1">4</div>
<div class="item item1">5</div>
<script>
function getRandomColor() { return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;}const itemEls = document.querySelectorAll(".item");for (const item of itemEls) { item.style.backgroundColor = getRandomColor();}
</script>
</div>
</body>
</html>
运行结果
用了JS的随机颜色，所以不同刷新，盒子颜色也是不一样的。
function getRandomColor() { return rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255});}const itemEls = document.querySelectorAll(".item");for (const item of itemEls) { item.style.backgroundColor = getRandomColor();}
flex–wrap
flex-wrap 决定了 flex container 是单行还是多行
nowrap（默认）：单行
wrap：多行
wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）
代码实例
<!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
background-color: orange;
display: flex;
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
}
.item {
width: 120px;
height: 120px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item1">2</div>
<div class="item item1">3</div>
<div class="item item1">4</div>
<div class="item item1">5</div>
<div class="item item1">6</div> <script>function getRandomColor() { return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;}const itemEls = document.querySelectorAll(".item");for (const item of itemEls) { item.style.backgroundColor = getRandomColor();}
</script>
</div>
</body>
</html>
运行结果
flex–flow（练习一下即可，不必太过关注）
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
顺序任何, 并且都可以省略;
justify–content
justify–content决定了flex items和main axis上的对齐
flex-start（默认值）：与 main start 对齐
flex-end：与 main end 对齐
center：居中对齐
space-between：
flex items 之间的距离相等
✓ 与 main start、main end两端对齐
space-around：
✓ flex items 之间的距离相等
✓ flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
space-evenly：
✓ flex items 之间的距离相等
✓ flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离
align–item
align-items 决定了 flex items 在 cross axis 上的对齐方式
normal：在弹性布局中，效果和stretch一样
stretch：
当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
baseline：与基准线对齐
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 items 之间的距离相等
✓ 与 cross start、cross end两端对齐
space-around：
✓ flex items 之间的距离相等
✓ flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
space-evenly：
✓ flex items 之间的距离相等
✓ flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离
flex-item属性 - order
order 决定了 flex items 的排布顺序
可以设置任意整数（正整数、负整数、0），值越小就越排在前面
flex-item属性 - flex items
flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
auto（默认值）：遵从 flex container 的 align-items 设置
stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致
flex-item属性 - flex-grow
flex-grow 决定了 flex items 如何扩展(拉伸/成长)
可以设置任意非负数字（正小数、正整数、0），默认值是 0
当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
如果所有 flex items 的 flex-grow 总和 sum 超过 每个 flex item 扩展的 size 为flex container 的剩余 size * flex-grow / sum
flex-item属性-flex-shrink
flex-shrink 决定了 flex items 如何收缩(缩小)
可以设置任意非负数字（正小数、正整数、0），默认值是 1
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为
flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
flex items 收缩后的最终 size 不能小于 min-width\min-height
小编这次先写到这里，关注小编，共同成长！
扫一扫
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
