flex布局HTML实例,flex布局实例⼊门教程【技巧篇】
什么是 Flexbox ?
Flexbox 是 flexible box 的简称(愚⼈码头注：意思是“灵活的盒⼦容器”)，是 CSS3 引⼊的新的布局模式。它决定了元素如何在页⾯上排列，使它们能在不同的屏幕尺⼨和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最⼤限度地填充可⽤空间。与以前布局⽅式(如 table 布局和浮动元素内嵌块元素)相⽐，Flexbox 是⼀个更强⼤的⽅式：
在不同⽅向排列元素
重新排列元素的显⽰顺序
更改元素的对齐⽅式
动态地将元素装⼊容器
什么情况下不建议使⽤ Flexbox ?
虽然 Flexbox ⾮常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使⽤ Flexbox 布局：
整体页⾯布局
完全⽀持旧浏览器的⽹站
浏览器⽀持 Flexbox 的情况：
旧版浏览器，如IE 11或更低版本，不⽀持或仅部分⽀持 Flexbox 。如果你想安全的使⽤页⾯正常呈现，你应该退回到其他的 CSS 布局⽅式，⽐如结合float 的 display: inline-block 或者 display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得⼀试。
术语
在 Flexbox 模型中，有三个核⼼概念：
– flex 项(愚⼈码头注：也称 flex ⼦元素)，需要布局的元素
– flex 容器，其包含 flex 项
– 排列⽅向(direction)，这决定了 flex 项的布局⽅向(愚⼈码头注：更多的⽂章叫主轴)
最好的学习⽅式是从经验和例⼦中学习，所以让我们开始吧!
Level 1 — 基础
1)创建⼀个 flex 容器
.flex-container {
display: flex;
}
See the Pen Flexbox 1 — Basic by feiwen8772 (@feiwen8772) on CodePen.0
要创建⼀个 flex 容器，您只需要将⼀个 display: flex 属性添加到⼀个元素上。默认情况下，所有的直接⼦元素都被认为是 flex 项，并从左到右依次排列在⼀⾏中。如果 flex 项的宽度总和⼤于容器，那么 flex 项将按⽐例缩⼩，直到它们适应 flex 容器宽度。
2)将 flex 项排成⼀列
.flex-container {
display: flex;
flex-direction: column;
}
See the Pen 将flex 项排成⼀列 by feiwen8772 (@feiwen8772) on CodePen.0
可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直布局。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列。
.flex-container {
display: flex;
flex-direction: column-reverse;
}
See the Pen flex 项以相反的顺序排列 by feiwen8772 (@feiwen8772) on CodePen.0
Level 2 — 新⼿
1)靠右对齐的 flex 项
.flex-container {
display: flex;
justify-content: flex-end;
}
回想⼀下，每个 Flexbox 模型都有 flex ⽅向(主轴)。justify-content ⽤于指定 flex 项在 flex ⽅向(direction)上的对齐位置。在上⾯的例⼦中，justify-content:flex-end 表⽰ flex 项在⽔平⽅向上靠 flex 容器的末端对齐。这就是为什么他们被放在了右边。
See the Pen 将 flex 项靠右对齐 by feiwen8772 (@feiwen8772) on CodePen.0
2)居中对齐的 flex 项
.flex-container {
display: flex;
justify-content: center;
}
See the Pen 居中对齐 flex 项 by feiwen8772 (@feiwen8772) on CodePen.0
3)铺开的 flex 项
您可以通过使⽤以下 justify-content 属性的三个间距值之⼀来指定容器中 flex 项之间应显⽰多少空间：
space-evenly : flex 容器起始边缘和第⼀个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。(愚⼈码头注：该属性以前很少看到，原因是以前浏览器不⽀持，chrome 也是 60 版本之后才⽀持。延伸⼀下，align-content: space-evenly 也是这个逻辑，建议在chrome 60 下查看 这个demo 。 )
space-between : 任何两个相邻 flex 项之间的间距是相同的，但不⼀定等于第⼀个/最后⼀个 flex 项与 flex 容器边缘之间的间距；起始边缘和第⼀个项⽬之间的间距和末端边缘和最后⼀个项⽬之间的间距是相等的。
space-around : flex 容器中的每个 flex 项的每⼀侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第⼀个/最后⼀个flex 项与其最近边缘之间的空间的两倍。
愚⼈码头注：⽹上了⼀张图⽚能更好的解释 justify-content 属性值的表现，如图：
4)flex 项在交叉轴上的对齐
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
通常，我们想沿着 flex ⽅向(主轴)排列 flex 项，还可以在垂直于它的⽅向(交叉轴)上对齐 flex 项。通过设置 justify-content:center和align-items:center，可以使 flex 项⽔平和垂直放置在 flex 容器的中⼼。
See the Pen flex 项在交叉轴上的对齐 by feiwen8772 (@feiwen8772) on CodePen.0
5)对齐某个特定的 flex 项
.flex-container {
display: flex;
align-items: center;
}
.flex-bottom {
align-self: flex-end;flex布局对齐方式
}
可以在某个特定的 flex 项上使⽤ align-self CSS 属性，来使该特定的 flex 项与容器中的其他 flex 项进⾏对齐。
See the Pen 对齐某个特定的 flex 项 by feiwen8772 (@feiwen8772) on CodePen.0
Level 3 — 中级
1)允许 flex 项多⾏/列排列
.flex-container {
display: flex;
flex-wrap: wrap;
}
默认情况下， flex 项不允许多⾏/列排列，如果 flex 容器尺⼨对于所有 flex 项来说不够⼤，那么flex 项将被调整⼤⼩以适应单⾏或列排列。
通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被排列到另⼀⾏/列中。
See the Pen 允许 flex 项多⾏/列 by feiwen8772 (@feiwen8772) on CodePen.0
2)flex 项反向多⾏/列排列
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-wrap:wrap-reverse 仍然使 flex 项以多⾏/列排列，但是它们从 flex 容器的末尾开始排列的。
See the Pen flex 项反向多⾏/列排列 by feiwen8772 (@feiwen8772) on CodePen.0
3)多⾏/列排列的 flex 项在交叉轴上的对齐⽅式
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
默认情况下，当 flex 容器的交叉轴(cross axis)上存在多余空间时，您可以在 flex 容器上设置 align-content，以控制 flex 项在交叉轴(cross axis)上的对齐⽅式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 和stretch(默认)。
See the Pen 多⾏/列排列的 flex 项在交叉轴上的对齐⽅式 by feiwen8772 (@feiwen8772) on CodePen.0
Level 4 — ⾼级
1)拉伸 flex 项
.
flex-container {
display: flex;
}
.h-of-type(1){
flex-grow: 1;
}
.h-of-type(2) {
flex-grow: 2;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。