欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

宁皓网 CSS:Flexbox 布局

Flexbox 是 CSS 的一种灵活的布局模块,使用 Flexbox 的布局方法,你可以很容易控制项目的位置,项目与项目之间的间隔等等。这是必学的一个 CSS 模块。
来自 
https://ninghao.net/course/2948#info

1)Flexbox 基础概念

用 Flexbox 的布局有两个部分组成, flex 容器,还有 flex 容器的亲儿子,也就是 flex 项目。下面来看一些在 Flexbox 上会出现的名词 ..

最外面这个带蓝色背景的东西就是 Flex Container ,也就是 Flex 容器 ... 在它里面有一些 Flex item ,Flex 项目。

这里还有两个轴 .. 水平的这个轴叫 main axis ,可以叫它主轴 .. 垂直的这个轴叫 cross axis ,中文可以叫它十字轴 .. 在主轴上有两个点,最左边这个叫 main start 主轴起点 ,最右边的这个点叫 main end ... 主轴的终点

十字轴上也有两个点,最上面的这个是 cross start 十字轴的起点 ,最下面这个叫 cross end ,十字轴的终点..

再看一下 Flex 项目里面, 水平的尺寸叫 main size ,垂直的高度叫 cross size .. 记住这张图以后,下面我们再去学一下使用 Flexbox 去设计布局。

来自 https://ninghao.net/video/2949#info

Flex Container
2)设置 flex 容器

打开 index.html ... 在这里先添加一个容器 ... 用一个 div .. 上面可以添加一个 css 类,比如 container .. 这个容器一会儿我们让它作为 Flex 容器 ..

div.container

容器里包装的东西是一些 flex 项目 .. 用一个 div .. 上面加上 item 这个类 .. 这些类的名字你可以随便定义 .. 再加上一个带数字的 item 类 .. 这里的 $ 符号会变成数字 ..

需要 5 个这样的项目 .. 项目里面添加一个数字 .. 数字的周围可以使用一个 span 标签包装一下 .. 它里面的内容就是一些数字 ..

div.item.item-$*5>span{ $ }

在这个 basic.css 样式表里,我提前添加一点样式 .. 主要就是设置了一下容器与项目容器的背景 .. 在项目上还有一点阴影的效果..

我们可以把自己的样式放在 style.css 这个样式表里 ..

现在 container 里面的项目都会堆叠在一起显示 .. 下面我们可以在这个 container 上面添加点跟 flexbox 的 flex 容器相关的样式 .. .container .. 用一个 display 属性 .. 设置成 flex ..

你会看到,这个容器里面的项目会水平显示 .. 设置了容器的 display: flex 以后,它里面的项目会自动变成 flex 项目。

另外我们也可以使用 inline-flex .. 前面加上一个 inline .. 这个容器会变成一个行内容器,所以它的宽度就会是它里面的内容的宽度 .. 这里我们还是改回成 flex ...

来自 https://ninghao.net/video/2951#info

3)flex-direction - 项目的排列方向

在 flex 容器上,可以使用一个 flex-direction 属性来控制它里面的项目的排列方式 .. 这个属性设置的是容器的 main axis ,也就是主轴的方向 .. 有两个主要的方向,一个是 row ,水平方向 .. 还有一个是 column,垂直的方向 ..

在这个 container 里面,再用一个 flex-direction .. 它的值先设置成 row .. row 就是行 .. 也就是水平方向 .. row 是 flex-direction 的默认的值 .. flex 项目会水平从左向右排列 .. 我们可以让它们倒过来排列 .. 方向仍然是 row .. 不过在它后面加上一个 reverse .. 表示倒置 ..

现在项目会在容器主轴的右边,向它的左边排列 ..

下面再试一下 column 这个方向 .. 把这个 reverse-row 换成 column .. 现在项目会垂直堆叠在一起,从上往下排列 .. 同样这个方向也可以倒过来 .. column-reverse ..

来自 https://ninghao.net/video/2952#info

4)flex-wrap - 是否要换行显示

默认在 Flex 容器里的项目会在同一行显示 .. 使用 flex-wrap 这个属性,我们可以控制项目是否要在多行显示 .. 这里再去添加几个项目 ...

div.item.item-$@6*7>span{ $@6 }

现在所有的这些项目都是在同一行显示 .. 在这个 container 上面,使用一个 flex-wrap 属性 .. 默认这个属性的值是 nowarp ,意思就是不换行 ..

这里再把它设置成 wrap .. 你会看到容器里的项目会根据容器的宽度在多行显示 ... 在这个 wrap 后面再加上一个 reverse .. 会颠倒每排内容的位置 .. 刚才最上面这排项目会跑到容器的底部 .. 容器底部那排项目会跑到最上面来 ..

来自 https://ninghao.net/video/2953#info

5)flex-flow

刚才介绍了应用在 flex 容器上的 flex-direction 还有 flex-wrap 属性 .. 设置这两个属性有一种更简单的方法,就是使用 flex-flow .. 输入一个 flex-flow .. 它的值有两个部分,第一部分就是 flex-direction .. 第二部分是 flex-wrap .. 默认这个属性的值是 row nowrap ..

这里我们可以设置成 row-reverse wrap .. 你会看到, flex 项目会从右向左排列,并且会在多行显示 ..

来自 https://ninghao.net/video/2954#info

6)justify-content

justify-content 这个属性可以调整项目的位置,还有项目与项目之间的间隔 .. 在这个 container 容器上面,添加一个 justify-content .. 默认这个属性的值是 flex-start ..

下面把它改成 flex-end .. 你会看到项目会右对齐显示 .. 如果想让它们居中的容器里,可以把 justify-content 的值设置成 center ...

在项目之间我们可以添加点间隔 ... 先试一下 space-between .. 它会在项目与项目中间添加一个间隔 .. 这里第一个项目的左边,还有最后一个项目的右边,跟容器之间不会有间隔 ..

另外 space-around 也可以添加点间隔 .. 把 space-between 换成 space-around .. 它们之间的区别是,space-around 是在项目的周围,也就是项目的左右两边去添加点间隔 ..

来自 https://ninghao.net/video/2955#info


7)align-items

align-items 这个属性可以设置项目在容器里的垂直方向的对齐方式 .. 这里我们先给容器设置一个高度 .. 比如设置成 300px ..

你会看到,除了内边距以外 .. 这个容器里的项目的高度现在跟容器的高度是一样的 .. 在这个容器里面,添加一个 align-items 属性 .. 它的值默认是 stretch .. 意思是拉伸 ... 也就是会把项目的高度拉伸,让它跟容器的高度一样 ..

下面把它设置成 flex-start .. 现在项目会靠着容器的最上面显示 .. 这个 flex-start 的意思是容器的垂直这个轴的起点,就是那个 cross start ..

再把它设置成 flex-end .. 项目会出现在容器的底部 .. 就是让项目在 cross end 这个点上显示 ..

居中,可以用一个 center .. 另外还有一种叫 baseline 的对齐方式 .. 基线对齐 .. 先把这个 align-items 属性的值设置成 baseline ..

现在项目都是靠着 cross 轴的上边显示 ..

下面我们可以修改一下第一个项目的边距 .. 给它添加一个上边的内边距 .. 设置一下 padding-top .. 设置成 50px .. 这样这个项目会比其它的项目都高一点 .. 因为现在使用了 baseline 的对齐方式 .. 所以其它的项目的位置也会作出调整 .. 应该使用的是项目里的内容作为这个 baseline ..

再给这里的第三个项目也添加一点边距 .. 添加一个 padding-top 属性 .. 设置成 70px .. 同样容器里的项目会根据这个项目的高度调整它们的对齐方式 ..

来自 https://ninghao.net/video/2956#info

8)align-content - 多行项目的对齐方式

在一个 flex 容器里,如果项目是在多行显示 .. 使用 align-content 这个属性,我们可以调整这些项目在容器里的垂直方向的对齐方式 ..

这里我设置了一下容器的高度 .. 还有把它的 flex-warp 属性设置成了 wrap ,这样项目会在多行显示 ..

在这个容器里,我们再添加一个 align-content 属性 .. 这个属性的值默认是 stretch .. 就是你现在看到的这种拉伸的对齐方式 .. 这样不同行的项目会被拉伸,占满容器的高度 ..

把它的值再设置成 flex-start .. 现在它们会靠着 cross 轴的起点显示 .. 也就是在容器的顶部开始显示,并且这些项目的高度不会被拉伸 ..

让它们在容器的底部显示的话, 可以用一个 flex-end .. 想让它们居中,可以使用 center 这个作为 align-content 这个属性的值 ..

在不拉伸项目高度的情况下,我们可以利用容器里这些剩下的垂直方向的空间 .. 使用一个 space-between .. 它会在项目的行与行的中间添加间隔 ..

再试一下 space-around ... 这个值会在项目的行的周围去添加间隔,这个间隔的大小取决于容器垂直的方向剩下的空间 ..

来自 https://ninghao.net/video/2957#info

Flex Item
9)order - 改变项目的顺序

在 flex 容器里的项目可以很容易去改变它们的顺序,而且不需要修改 html 代码 .. 默认这些项目的顺序就是添加它们的 html 代码的顺序, 1 就是排在第一 .. 最后这个是 5 ..

打开浏览器的开发者工具 .. 选中在 flex 容器里的一个项目 .. 打开 Computed 这个选项卡 .. 勾选一下 Show inherited properties ..

在这里找到 order 这个属性 .. 它的值是 0 .. 这个 order 属性可以控制项目在 flex 容器里的顺序 .. 回到编辑器 ..

比如我想让 1 这个项目排在所有这些项目的最后 .. 因为所有项目默认 order 属性的值都是 0 ,所以如果我把它设置成 1 的话,就会让这个项目排在最后 .. order: 1 ..

你会看到, 1 这个项目会在最后 .. 如果我想让 5 这个项目排在这些项目的最前面 .. 在这个项目的容器上,同样使用一个 order 样式 .. 可以把它的值设置成 -1 ,因为 -1 小于 0 ,这样它就会排在所有项目的最前面 ..

order 值是 -1 的项目排在最前面, 然后是 2,3,4 。它们的 order 属性的值都是默认的 0 ,所以它们的顺序就是 html 代码的顺序 .. 最后是 order 的值是 1 的这个项目 ..

来自 https://ninghao.net/video/2959#info

10)flex-grow, flex-basis, flex-shrink

在这个 flex 容器里面有几个项目,现在它们的宽度就是这些项目里的内容的宽度 .. 如果你想利用一下容器剩下的这些水平位置上的空间 .. 可以设置一下项目的 flex-grow 这个属性 ..

在 .item 上面,添加一个 flex-grow .. 这个属性默认的值是 0 .. 这里我们把它设置成 1 .. 这样所有的项目的 flex-grow 这个属性的值都会是数字 1 ,所以现在它们的宽度是一样的 ..

现在我想让某个项目的宽度大 放大 一些 .. 可以单独去设置一下这个项目的 flex-grow 属性的值 .. 比如设置一下 .item-3 这个项目 ..

添加一个 flex-grow .. 设置成数字 3 .. 你会看到这个项目的宽度会比其它的项目大一些 .. 这个数字越大,它的宽度也就越大 .. 也就是相对于其它的项目这个项目占用的额外的空间就越大。

flex-basis 可以设置一下 flex 项目的初始宽度 .. 先去掉在项目上应用的这个 flex-grow .. 默认这个 flex-basis 的值是 auto ..

在所有的项目上添加一个 flex-basis .. 比如设置成 100px .. 现在所有项目初始化的宽度就是 100 像素 ..

flex-shrink 控制的是项目的缩小数 .. 默认它的值是 1 .. 调整一下页面的宽度 .. 到一定程度的时候,你会发现项目的宽度都会缩小 ..

如果你不想让某个项目缩小它的宽度 .. 在这个项目的上面 .. 用一个 flex-shrink .. 把它的值设置成 0 .. 再调整一下页面的宽度 .. 现在除了 item-3 这个项目,其它的项目都会缩小 ..

现在如果你想让 item-3 更容易比其它的项目缩小宽度 . .. 可以把 flex-shrink 的值设置成一个比 1 大的正数 .. 比如这里我们设置成 3 ..

调整页面的宽度 .. 现在你会看到, item 3 这个项目比其它的项目都会窄一些 ..

设置 flex 项目的 flex-grow,flex-shrink 还有 flex-basis 有一个更简单的方法,就是使用 flex 这个属性 ... 你可以分别指定一下项目的 flex-grow,flex-shrink,还有 flex-basis 的值 .. 这也是 w3c 推荐使用的方法 ..

在所有的项目上面,添加一个 flex 属性 .. 它的值默认是 0 1 auto .. 第一个 0 是 flex-grow 的值,第二个 1 是 flex-shrink 的值,最后的 auto 是 flex-basis 的值 ..

来自  https://ninghao.net/video/2960#info

11)align-self - 自己对齐

在这个 flex 容器上, 我用了一个 align-items 属性,它的值是 flex-start .. 所以在这个容器里的所有的项目都会靠着容器的最上面开始显示 ..

如果你想单独去控制容器里的某个项目的对齐方式,可以在这个项目的上面使用 align-self 这个属性 .. 比如现在我想让 item 1 这个项目靠着容器的最下面这个边儿 ..

.item-1 .. 用一个 align-self .. 它的值默认是 auto,也可以是 flex-start,flex-end,center , baseline 还有 stretch .. 先把它设置成 flex-end .. 这里 item 1 这个项目会靠下边显示 .. 其它的项目仍然是靠上边显示 ..

再设置一下 item-2 的对齐方式 .. 同样使用一个 align-self .. 把它的值设置成 center .. 让它居中 .. 下面再去拉伸一下 item 3 .. 添加一个 align-self .. 拉伸可以使用 stretch ..

然后让 item 4 这个项目,也居中显示 .. 方法就是把它的 align-self 属性的值设置成 center ..

最后再让这个 item 5 靠下边儿显示 .. 使用 align-self .. 它的值是 flex-end ..

来自 https://ninghao.net/video/2961#info



普通分类: