常见布局方式

一、静态布局（Static Layout）

既传统web设计 就是不管浏览器尺寸多少，网页布局就按当时写代码的布局来布置;

• 块级元素：每个块级元素会在上一个元素下面另起一行，他们会被设置好的margin分离。块级元素是垂直组织的。
• 内联元素：不会另起一行，只要在其父级块级元素的宽度内有足够的空间，他们与其他内联元素被安排在同一行。如果空间不够，溢出的文本或元素会转移到新的一行

1. 优点一般采用css2之前的写法，不存在浏览器兼容性。布局简单。

2. 缺点移动端和pc端不能使用同一个页面，两个页面的布局不一致，移动端需要自己另外一个布局并使用自己另外设计一个布局并使用不同域名呈现。

二、弹性布局（Flexible Box）

弹性布局是CSS3引入的强大的布局方式，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局

.box{
    display: flex;
}
复制代码

行内元素也可以使用Flex布局

.box{
    display: inline-flex;
}
复制代码

flex-direction属性

控制子元素的排布顺序

• row（默认值）：灵活的项目将水平显示，正如一个行一样。
• row-reverse：与 row 相同，但是以相反的顺序。
• column：灵活的项目将垂直显示，正如一个列一样。
• column-reverse：与 column 相同，但是以相反的顺序。

<div id="big">
  <div id="main">
    <div style="background-color:coral;">A</div>
    <div style="background-color:lightblue;">B</div>
    <div style="background-color:khaki;">C</div>
    <div style="background-color:pink;">D</div>
    <div style="background-color:lightgrey;">E</div>
    <div style="background-color:lightgreen;">F</div>
  </div>
</div>
复制代码

#main {
    display: flex;
    flex-direction::row|row-reverse|column|column-reverse;
}
复制代码

row

运行效果：

row-reverse

运行效果：

column

运行效果：

column-reverse

运行效果：

justify-content属性

子元素主轴线上如何对齐

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 项目位于容器的中心。
• space-between：项目位于各行之间留有空白的容器内。
• space-around：项目位于各行之前、之间、之后都留有空白的容器内。

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>
复制代码

#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: flex;
    justify-content: flex-start|flex-end|center|space-between|space-around;
}
复制代码

flex-start

运行效果：

flex-end

运行效果：

center

运行效果：

space-between

运行效果

space-around

运行效果：

align-items属性

子元素横轴线上如何对齐

• flex-start：元素位于容器的开头。
• flex-end：元素位于容器的结尾。
• center：元素位于容器的中心。
• baseline:元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>
复制代码

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items: center;
}
复制代码

flex-start

运行效果：

flex-end

运行效果：

center

运行效果：

baseline

运行效果：

stretch

运行效果为：

总结：CSS水平垂直居中所有方法：

完整笔记链接