css布局

一、弹性布局

flex 简单介绍

Flex 全称 Flexible box 布局模型，通常称为 flexbox 或 flex，也称为弹性盒子或弹性布局。一种比较高效率的 css3 布局方案。 事实上它是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局。
旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间 (主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

优点:

应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。 

缺点:

需要花更多时间理解和测试，让布局适合所有用户。 这种布局类型相对于其他两个更难制作。

注：设为Flex布局后,子元素的float、clear和vertical-align属性将失

容器的属性–以下6个属性设置在容器上。

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

1、flex-direction属性 

         它可能有4个值。

        

1. flex-direction: row | row-reverse | column | column-reverse;
2. row（默认值）：主轴为水平方向，起点在左端。
3. row-reverse：主轴为水平方向，起点在右端。
4. column：主轴为垂直方向，起点在上沿。
5. column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap属性 

它可能取三个值。
flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap（默认）：不换行 
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

3、 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content属性

 justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。

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属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，
align-items: flex-start | flex-end | center | baseline | stretch;
下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline:：项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 

6、 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
该属性可能取6个值。
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
stretch（默认值）：轴线占满整个交叉轴。
 

 

子元素的属性-以下6个属性设置在子元素上
1、order
2、flex-grow
3、flex-shrink
4、flex-basis
5、flex
6、align-self 

二、固定布局与流体布局的优缺点

固定布局：

注：设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。
 

大多数设计者选择 960 或 760px 的固定宽度。960px 最适合 1024×768或者更高的分辨率，有一点空间设置 margin。如果设计者想让布局适应 800×600 分辨率的用户，可以使 用 760px 的宽度，它仍然适用于更大的分辨率

 优点： 固定宽度布局更容易使用，在设计方面更容易定制。 在所有浏览器中宽度一样,不设置 min-width和max-width，来防止内容缩放引起的布局混乱。

缺点： 对于使用高分辨率的用户，固定宽度布局会留下很大的空白。 屏幕分辨率过小时需要垂直滚动条。 

 

三、其他布局 

 

浮动布局：

根据内容是固定尺寸还是百分比又可以划分为：

• 流体浮动布局
• 固定浮动布局

定位布局：

根据内容是固定尺寸还是百分比又可以划分为：

• 流体定位布局
• 固定定位布局

使用定位布局的重要知识点—设置参照基准点：
将父元素设为相对定位，且不设置坐标
如果父元素设置了相对定位，子元素的决定定位将以父元素的基准点为参照基准点 

了解css3新增的多列布局：

 通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
传统布局实现多列 (3 列及以上) 布局的问题

• 实现起来麻烦，很不方便
• 后期维护更改困难

多列属性: 

columns 规定设置 column-width 和 column-count 的简写属性。
column-width 规定列的宽度。 (该宽度为缩放时的最小宽度，默认为 auto)
column-count 规定元素应该被分隔的列数。默认为 auto
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。默认值为 1，可以设置为 all
column-gap 规定列之间的间隔。
column-fill 规定如何填充列。（主浏览器都不支持该属性）

BFC布局：

我们会用块级元素做布局，但是避免不了一些诡异的现象出现所以需要 BFC 规范去解决这样的问题。
触发 BFC 规范的元素，可以形成一个独立的容器，不受外界的影响，从而解决一些布局问题

触发 BFC：

• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position(absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden/auto/scroll)

BFC 应用:

• 解决 margin 叠加问题
• 解决 margin 传递问题
• 解决浮动问题
• 解决覆盖问题