本文目录
- 如何用HTMLflex布局写出两行列表
- CSS中的Flexbox布局是怎么使用的
- flex 布局
- Flex布局
- flex布局全解析
- 微信小程序flex布局
- 神奇的flex布局
- 怎么把两个div并列显示
- 【web前端】十分钟彻底弄懂 flex 布局
- 【归纳】flex布局
如何用HTMLflex布局写出两行列表
《div style="display: flex;flex-wrap: wrap;"》《div style="width:50%;height: 100px;background-color: #000000;"》第一列1《/div》《div style="width:50%;height: 100px;background-color: blue;"》第一列2《/div》《div style="width:50%;height: 100px;background-color: red;"》第二列1《/div》《div style="width:50%;height: 100px;background-color: yellow;"》第二列2《/div》《/div》
我没有考虑兼容性问题，自行加上前缀就可以。这里最主要注意两点：
在外层要加上flex-wrap: wrap;非常重要，这句话的意思就是可以换行；
内层一定要给其设置宽度。这样才能有效换行，否则全堆在一行里了。
CSS中的Flexbox布局是怎么使用的
我们只会用到一点点儿CSS布局的属性，虽然少，但既然要用到，就得把它们总结在这里，搞明白。
在了解CSS布局的相关属性之前，我们先了解一下 盒子模型——CSS会把每个组件都看作是一个盒子，每个盒子从内往外有三个部分：
组件的宽度和高度决定了它在屏幕上显示的尺寸，一个组件的宽度和高度就是它 外边框所包围矩形 的宽度和高度，iOS里也是这样的。
我们可以通过 width 和 height 属性给一个组件设置固定的宽度，不过需要注意 这两个属性只能接收数值，不能带单位，这是因为RN要自己去适配安卓和iOS的单位。
在RN里，我们想让一个组件自适应宽高，要分两步。 首先我们要让该组件撑满它的父视图，即如果我们想自适应宽度，就得先让子视图的宽度撑满它父视图的宽度，如果我们想自适应高度，就得先让子视图撑满它父视图的高度，如果我们宽度和高度都想自适应，就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样，通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。
这里再对第一步做个解释， item的 flex: 1 属性可以让item在主轴上撑满它的容器，容器的 alignItems: ’stretch’ 属性 + item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。 好像有点不明白是吧，我们再通过一个例子来说得明了点，RN里不是默认主轴为竖向、侧轴为横向嘛，我们就采取这个默认状态来举例子。 在RN里，默认主轴为竖向、侧轴为横向的状态下，如果我们想早桥让某个组件自适应高度，就得首先在它自身上设置 flex: 1 属性，来让它的高度撑满它的父视图；如果我们想让某个组件自适应宽度，就得首先在它父视图身上设置 alignItems: ’stretch’ 属性（当然默认就是这个值），这还不够，你还得确保不给这个组件设置 width 属性或者 width 属性的值设为 auto ；如果我们想让一个组件自适应宽高，则两者都得做。 当然，如果我们设置了主轴为横向、侧轴为竖向，其实也是一样的道理，自己捋一姿世下就知道怎么做了。如果还是看不懂的话，没有关系，下面我们会详细谈到这几个属性，等你学了这几个属性，反过头来看这里就明白了。
Flex是Flexible Box的缩写，可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写，就译为弹性盒子布局，用来对一个盒子进行灵活的布局。
在了解Flex布局之前，我们得先了解一下Flex布局里的两对儿 重要的 概念。
采用Flex布局的组件，被称为Flex容器（flex container），简称容器（container）。
这个组件上的子组件，被称为Flex项目（flex item），简称item（项目）。
我们可以把容器和item看做是父视图和子视图的关系， 因此下文中的容器、父组件、父视图将是一样的概念，item、组件、子视图将是一样的概念，组件和视图将是一样的概念。
每个容器都有两根轴，一个是 主轴， 一个是 侧轴 。
容器里众多的 item自动沿主轴进行排列。
一个item在主轴方向上所占据的空间称为 main size ，一个item在侧轴方向上所占据的空陆册猛间称为 cross size 。
RN里主轴的默认方向为竖向，侧轴为横向。 浏览器里主轴的默认方向为横向，侧轴为竖向，下面我们讲Flex布局的属性时会采用浏览器的状态，学会后对应到RN里，换个主轴方向就可以了。
用在容器上的属性，最常用的有 5个 ， 而且这些属性还都不是从来设置容器自己的布局，而是用来设置容器里item的布局。
flex-direction 属性用来设置主轴的方向，即容器里item自动排列的方向。 在浏览器里，主轴的方向默认为横向，所以 flex-direction 属性的默认值为 row 。
它有4种取值。
justify-content 属性用来设置item在主轴上的对齐方式。
它有5种取值。
align-items 属性用来设置item在侧轴上的对齐方式。
它有5种取值。
默认情况下，一个容器只有一条主轴，所有的item都会沿着这条主轴自动排列下去，但是如果item太多了，一个屏幕长度的主轴根本串儿不下这么多item，那后面的item就会溢出屏幕，而界面还不是 ScrollView ，不能滚动，怎么办呢？
flex-wrap 属性用来设置换行，即当容器主轴上显示不下那么多的item时，我们可以让item换行来显示，并且一旦设置了换行，那么这个容器就不再是一条主轴了，而是会有多条平行的主轴。
它有3种取值。
align-content 属性用来设置多条主轴的对齐方式， 如果项目只有一根轴线，该属性不起作用， 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。
它有6种取值。
用在item上的属性，最常用的有 2个 ， 这些属性都是用来设置item自己的布局。
在第1小节容器的属性，我们已经通过 align-items 属性统一设置了容器里item在侧轴上的对齐方式，但如果其中某个item不想遵循这个对齐方式怎么办呢？我们会常见到这种场景，10个里有8个item是一样的对齐方式，就有1、2个item特立独行，那我们就得用item自己的 align-self 属性来单独给它们设置对齐方式了。
align-self 属性用来设置单个item在侧轴上的对齐方式， 注意是给特立独行的单个item设置哦，而且是侧轴，它会覆盖它容器的 align-items 属性，当然如果不设置这个属性，默认值就为 auto ，即item会默认使用容器的 align-items 属性给它设置的对齐方式。
它有6种取值，除了 auto ，其他都与 align-items 属性完全一致。怎么说呢，item的 align-self 属性似乎是用来造反的，反抗它容器的 align-items 属性。
flex 属性接收一个整数值， flex 属性描述起来太麻烦了，可以自行去搜索加深理解，我这里只列举出它的用途及注意事项。
（1） flex 属性有三个用途
（2）使用 flex 属性需注意
iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 来做布局就行了，它们布局的思路是一样的， 一个组件也同样至少需要四个约束。
当然，它们之间有一个极其细小的差别，那就是：上面提到的“RN里组件自适应宽高分两步”，而iOS里Masonry才不管你什么撑满不撑满呢。
当然，它们之间有一个极其巨大的差别，那就是：iOS里是没有主轴和侧轴之分的，你可以在一个父视图上横向、竖向同时放控件，并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分，我们添加的组件只会沿着主轴排列，不可能同时出现横向和竖向排列，并且布局的时候也只能是沿着主轴布局，不可能同时完成两个方向的布局。
下面我们就通过几个小练习，来对比一下Masonry布局和Flex布局+CSS布局的思路，加深对RN里怎么布局组件的理解。
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
参考博客：
阮一峰的《Flex布局：语法篇》 阮一峰的《Flex布局：实例篇》
flex 布局
一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写 ，意为“弹性布局” 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为 Flex 布局 （行内元素也可以） 二、基本概念 采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目三、容器的属性 （重点记忆） 以下6个属性设置在容器上。 3.1 flex-direction 属性决定主轴的方向（即项目的排列方向） flex-direction:row | row-reverse | colume | colume-reverse; 1）row：横向从左到右排列（左对齐），默认的排列方式。 2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 3）column：纵向排列 4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。flex-wrap 定义如果一条轴线排不下，如何换行 flex-wrap: nowrap | wrap | wrap-reverse 1) nowrap (默认)不换行 2）wrap 换行，第一行排列在上方 3）wrap-reverse: 换行，第一行在下方 3.2 .flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap justify-content 定义了项目在主轴上的对齐方式 justify-content : flex-start | flex-end | center | space0-between | space-around align-items 定义项目在交叉轴上如何对齐 align-item: flex-start | flex-end | center | baseline | stretch align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
Flex布局
Flex布局也称弹性布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。弹性布局的主要思想是让容器能根据需要改变项目的宽度和高度，以填满可用空 间，满足所有类型的显示设备和屏幕尺寸。因此弹性布局模块的大小是未知或者动态变化的。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。Flex布局比较适合用于小规模的布局，比如应用程序中的组件布局。Flex布局容器默认存两条轴：水平主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置与边框的交叉点叫作main start。结束位置叫作main end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。项目默认沿主轴排列。 1.给父元素加上display:flex开始盒子布局 row | row-reverse | column | column-reverse （1）row（默认值）：主轴为水平方向，起点在左端。 （2）row-reverse：主轴为水平方向，起点在右端。 （3）column：主轴为垂直方向，起点在上沿。 （4）column-reverse：主轴为垂直方向，起点在下沿。 nowrap | wrap | wrap-reverse （1）nowrap：不换行 （2）wrap ：换行。第一行在上方 （3）wrap-reverse：换行。第一行在下方 flex-start | flex-end | center | space-between | space-around （1）flex-start（默认值）：左对齐 （2）flex-end：右对齐 （3）center： 居中 （4）space-between：两端对齐，项目之间的间隔都相等 （5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 flex-start | flex-end | center | baseline | stretch （1）flex-start：交叉轴的起点对齐 （2）flex-end：交叉轴的终点对齐 （3）center：交叉轴的中点对齐 （4）baseline: 项目的第一行文字的基线对齐 （5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 auto | flex-start | flex-end | center | baseline | stretch 该属性可取6个值，除了auto，其他都与align-items属性完全一致。 (完)
flex布局全解析
很长一段时间, 我知道有 flex 这个布局方式, 但是始终没有去学它. 3点原因:
最近由于开发需要, 学习了下WeUI的实现 , 发现里面大量使用了 flex 布局, 于是决定学习一下.
Flexbox Layout , 官方名为 CSS Flexible Box Layout Module , 意为"弹性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的 网格布局 CSS Grid Layout Module ). flex 是 flexible 的缩写.
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局。
采用flex布局的元素被称为 flex容器 (flex container) , 它的子元素即为 flex元素 (flex item) .
flex容器中包含两个相互垂直的轴, 即 主轴 (main axis) 和 副轴 (cross axis) .
flex元素沿主轴从 主轴起点 (main start) 到 主轴终点 (main end) 依次排布.
如果flex容器包含多行flex元素, 则 flex行 (flex lines) 沿副轴从 副轴起点 (cross start) 到 副轴终点 (cross end) 依次排布.
单个flex元素占据的主轴空间叫做 主轴长度 (main size) , 占据的副轴空间叫做 副轴长度 (cross size) .
Getting Dicey With Flexbox 中提到:
前一段时间同事做过 video 相关的开发, 踩到各种坑, 因此我知道 video 的支持不那么好, 特别是在Android上. 让我惊奇的是 flex 竟然比 video 的支持更好?
从 CanIUse 的数据来看, flex 的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81% , 而 video 的支持度是: 92.48% . 浏览器对 flex 的支持好像并没有特别好...
但是有微信的WeUI使用了 flex 布局, 我觉得在移动端 flex 应该还是支持度比较高的.
所以, 如果你是做移动端开发的, 可以优先考虑 flex .
下面就开始介绍与 flex 布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.
注意: 以下属性值都可以有 initial (该属性的默认值)和 inherit (继承自父元素), 本处省略.
这类属性有6种, 分别为:
注意:
注意: row 和 row-reverse 受到了 direction 属性(默认值为 ltr , 可改为 rtl )的影响.
注意: 此属性只在flex容器中有 多行 flex元素时才有作用.
这类属性有6种, 分别为:
注意: flex元素的 float , clear 和 vertical-align 会失效.
当flex元素有父元素时, 它的 align-self: auto 即为父元素的 align-items 属性; 否则(无父元素时), 相当于 stretch .
当有剩余空间时, flex元素会根据 flex-grow 按比例分配剩余空间.
默认值 0 代表, 即使有剩余空间, 该flex元素也不放大.
当flex容器空间不足时, flex元素会根据 flex-shrink 按比例缩小.
flex-shrink 为 0 则表示, 即使flex容器空间不足, 该flex元素也不缩小.
flex-basis 定义了分配剩余空间之前flex元素的初始大小, 可为长度值(如 20% , 5rem 等)或 auto 等关键词.
flex-basis: auto 表示, 以 flex元素的主轴长度 为 flex-basis . 若flex元素的主轴长度也是 auto , 则以flex元素内容(即所有子元素)的大小为 flex-basis .
除了 auto 还有 content , max-content , min-content 和 fit-content 关键词, 但是现在浏览器对它们的支持太少, 可以忽略.
(敲黑板) 同学们注意, 这里是重点!
这里的 可选值 我参照了 W3C flexbox 的写法. 其中:
举例来说, a | 包含的可能情况有 a , b , c , b c , c b .
现在回过头来再看 none | 就清晰多了.
注意, none 是一个特殊值, 相当于 0 0 auto .
另外, 如果 flex 中不指定:
注意: flex 的初始值是 0 1 auto , 即由每个 flex 因子本身的默认值组成(比方说 flex-grow 的默认值就是 0 ).
但是 , 如果利用 flex 设置了至少一个 flex 因子, 那么没被设置的那些 flex 因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0 .
我来举几个栗子.
W3C建议使用简写形式 flex , 因为它可以方便地应对下面4种 常见情况 .
自此, 我们已经知道了 flex-grow , flex-shrink 和 flex-basis 的作用. 根据这三个值, 计算flex元素的大小只需三步:
第一步: 计算元素的 flex-basis , 有两种情况: 1. 具体的长度值, 或, 2. auto (即flex元素的大小). (这里忽略了 content 等目前支持还不完善的关键词).
第二步: 计算剩余空间, 即 剩余空间 = flex容器的内部空间 - flex元素flex-basis值的总和 .
第三步: 按照 flex 因子(放大时为 flex-grow ; 缩小时为 flex-shrink )分配剩余空间到每个元素. flex元素的最终大小 = flex-basis - flex-factor * 剩余空间 .
举个栗子.
假设flex容器的内部空间为 200px , flex元素的大小的总和是 160px . 看起来, 还有 200 - 160 = 40px 的剩余空间, 应该放大flex元素, 是不是? 不一定! 要看它们的 flex-basis 总和.
假设它们的 flex-basis 总和是 300px , 那么剩余空间应该是 300 - 200 = -100px . 此时剩余空间是 负数 , 应该以 flex-shrink 对每个flex元素在 flex-basis 的基础上进行 缩小 .
下例中, 所有flex元素本身的大小为 80px , 元素中为 flex 值.
200px
0 1 auto
0 3 auto
0 1 150px
0 3 150px
125px
75px
你可以看到, 第一行的flex元素因为设置了 flex-basis:auto , 所以它们的 flex-basis 就相当于元素大小, 即 80px , 即 flex-basis 总和为 160px , 不足容器的 200px 空间, 此时应该放大元素. 但又由于元素的 flex-grow 为 0 , 所以每个元素分配到 0 * 40 = 0px 的剩余空间, 即不放大.
第二行的flex元素设置了 flex-basis:150px , 所以它们的 flex-basis 总和为 300px , 超过了容器的 200px 空间, 故按照 flex-shrink (比例为 1:3 )进行缩小. 由于剩余空间为 -100px , 所以第一个元素应缩小 25px 变成 125px , 第二个元素应缩小 75px 变成 75px .
绝对flex: 从0开始分配空间.
第一行中 flex-basis 为 0 , 表示每个flex元素的初始大小都视为 0 . 此时, 剩余空间就是"flex容器的大小".
相对flex: 从flex元素大小开始分配空间.
第二行中 flex-basis 为 auto , 表示每个flex元素的初始大小都是它本身的大小. 此时, 剩余空间就是"flex容器的大小 - flex元素大小的总和".
呃... flex的东西还是挺多的, 特别是 flex 因子相关的部分, 得花点儿时间理解.
但是, 我相信学flex是值得的, 谁用谁知道!
微信小程序flex布局
Flex布局：意为“弹性布局”，为盒模型提供巨大的灵活性 使用说明： 1. 任何容器都可以使用flex布局 display: flex; 2.行内元素可以使用flex布局 display: inline-flex; 外层flex容器的属性： 1.flex-direction属性 flex-direction: row | row-reverse | column | column-reverse; row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2.flex-wrap属性 flex-wrap: nowrap | wrap | wrap-reverse; nowrap (默认值) ：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap flex-flow: 《flex-direction》 || 《flex-wrap》; 4. justify-content属性：定义item在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around; flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 5. align-items属性：定义项目在交叉轴上如何对齐 align-items: flex-start | flex-end | center | baseline | stretch; flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 6. align-content属性：定义多跟轴线的对齐方式，如果只有一根轴线则不起作用 align-content: flex-start | flex-end | center | space-between | space-around | stretch; flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 项目item的属性 1. order属性：定义项目的排列顺序，数值越小越靠前，默认值为0，负数在0前面 order: 《integer》; 2. flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 flex-grow: 《number》; /* default 0 */ 3. flex-shrink属性：定义项目缩小比例，默认是1，即如果空间不足，该item将缩小 flex-shrink: 《number》; /* default 1 */ 4. flex-basis属性：在分配多余空间之前，item占据的主轴空间（main size），默认值auto，即item本身大小 flex-basis: 《length》 | auto; /* default auto */ 5. flex属性：是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto，后面两个属性可选 flex: none | 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 6. align-self属性：允许单个item与其他item有不一样的对其方式，可覆盖align-items属性 align-self: auto | flex-start | flex-end | center | baseline | stretch;
神奇的flex布局
在最近的学习中，接触到了flex布局，发现flex很好用，所以今天决定写一写关于flex的一些内容。
在之前的探索中，当一列有很多元素的时候，我通常是通过修改元素的百分比来进行排布。但是当某些时候（例如需要给他们添加等间距时会撑到下一行，或者定位到一定的位置）会很难办。
这时候就要用到
先来看看这个整体属性。它的语法如下
来看看各个属性都是什么意思吧
看完这个表之后，我们来细讲一下各个属性。
flex-grow用来规定项目将相对于其他flex的项目进行扩展的量。 如果元素不是flex盒对象的元素，则该属性不起作用。
语法：
这个属性可以在flex元素的子元素下设置，设置后的值是相对于同级子元素来说的。利用这个属性，我们可以很方便的排布出各种比例宽度的排版。
这个属性的值就是相对于grow将数字变为倒数。例如在flex-grow中
表示的是将该元素设为同级flex元素的3倍
那么
则是将该元素设为同级元素的三分之一。
这个就不多讲了，和flex-grow差不多。
flex-basis属性用于设置或检索flex盒伸缩基准值。
如何理解呢？差不多就是有一堆flex的元素，你只想要调整其中一个的宽度（例如第四个），就可以使用d
来调整。
这个属性用于规定flex项目的方向。
这个属性可以很便利的将一行显示的元素变为竖向的一列，或者将元素倒置过来。你也可以通过嵌套div实现某部分倒置或者在某处拐弯。
这个属性让flex元素在必要的时候拆行（碰到浏览器边界或者div边界。）同时横轴的方向决定了新行堆叠的方向。
这个属性是flex-direction和flex-wrap属性的复合属性。语法如下
由于这两个属性的值已经说过，所以就不列表显示了，只要注意使用顺序就好了。
怎么把两个div并列显示
1. html怎么将两个div并排显示啊 可以采用浮动的方法，只要宽度足够，两个div就可以在一排显示。打div里面包含两个小div。 方法如下： 1、创建一个大div。 代码如下：#main {float:left;border:1px width:100%; } 2、创建一个左边小div 代码如下： #left{float:left;border:1px width:40%; } 3、创建一个右边小div 代码如下： #right {float:left;border:1px width:40%; } 4、制作成css文件，或者直接添加到网页上，就可以实现并排显示。 2. html中如何将两个div并列显示 ①两个div style=float:left ②两个div style=display:inline-block;vertical-align:top（不一定兼容所有浏览器，获得像按钮一样的属性） 上面两个方法右边的div还要margin-left:**px或padding-left:**px，效果看看起来就不那么近了。 ③绝对定位，不推荐。 还有，你把“关于”扩到右边的div里面了，感觉看起来有点不太好。 3. 使用CSS如何让两个div并排显示 方法一：把div设为“行内块级元素”： 《style》 div {display:inline-block; border:1px solid #000} 《/style》 《div》；第一个div《/div》 《div》；第二个div《/div》；方法二：使用浮动： 《style》 div {float:left; border:1px solid #000} br {clear:both} 《/style》 《div》；第一个div《/div》 《div》；第二个div《/div》 《br/》；方法三：使用flex布局： 《style》 .main {display:flex; flex-direction:row;} .sub {border:1px solid #000} 《/style》 《div class=main》 《div class=sub》；第一个div《/div》 《div class=sub》；第二个div《/div》 《/div》；还有其他多种方法实现，就不一一列出了 4. 多个div怎么在一个div中并排显示 采用浮动标签float标签，或者ul li标签，写一个float如下《meta ; charset=gbk" /》无标题文档《style》.left{float:left;height:100px;width:100px;border:1px #CCCCCC solid;}《/style》《body》sssssssssssssss望采纳。
【web前端】十分钟彻底弄懂 flex 布局
flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：
其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。
使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴 （main axis），和竖直的 交叉轴 （cross axis）。
主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。
item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。
注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。
flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。
flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。
它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。
决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：
决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：
决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：
决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：
该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：
item 的属性在 item 的 style 中设置，item 共有如下六种属性：
order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。
它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。
定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。
表示 item 在主轴上占据的空间，默认值为 auto。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。
align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。
【归纳】flex布局
说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种： 这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点： 接下来就将对flex布局的几个重要知识点进行归纳。 采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。 如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。 flex container（flex容器）有如下六个属性： 该属性主要有以下值： 该属性主要有以下值： 默认值为row nowrap，可以以如下方法设定该属性： 该属性主要有以下值： 该属性主要有以下值： 该属性主要有以下值： flex item（子元素）有如下六个属性： 该属性默认值为0。 如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。 该属性默认值为1。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。 默认值为0 1 auto。可以以如下方式设定该属性： 数值越小，排列越靠前，默认为0。 即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧 如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto; 实现手机上中下布局： 以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。 ***隐藏网址***
