一、关于Flex布局。

1.什么是Flex布局？

Flex是Flexible Box的缩写，意思为“弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器和行内元素都可以指定为Flex布局。

*需要注意的是：设为Flex布局为，子元素的float，clear和vertical- align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

具体的讲解可以去http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

了解详细。

3.项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

具体可以去http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解详细情况。

二、其他布局。

1、网格布局

（1）基本的网格布局

最简单的网格布局就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

源代码如下：

HTML：

<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS:

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

(2)百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

源代码如下：

HTML：

<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>

CSS：

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

2.圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

源代码如下：

HTML：

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS：

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

在我们写网页的过程中肯定要写到适配，这个布局就可以解决这个问题，所以可以用用，解决适配还有栅格系统等其他方法，可以自己探索。以上有的地方引用自其他的地方。

Flex布局--弹性布局

一、关于Flex布局。

1.什么是Flex布局？

2.容器的属性

3.项目的属性

二、其他布局。

1、网格布局

2.圣杯布局

猜你喜欢