CSS常见布局方式

一、静态布局（Static Layout）

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

• 块级元素：每个块级元素会在上一个元素下面另起一行，他们会被设置好的margin分离。块级元素是垂直组织的。

• 内联元素：不会另起一行，只要在其父级块级元素的宽度内有足够的空间，他们与其他内联元素被安排在同一行。如果空间不够，溢出的文本或元素会转移到新的一行

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

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

二、弹性布局（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

欢迎大家指点评论~ 点赞+关注⭐⭐⭐