Flex-弹性布局

最新推荐文章于 2022-08-15 14:42:32 发布

desmondgz

最新推荐文章于 2022-08-15 14:42:32 发布

阅读量255

点赞数

本文链接：https://blog.csdn.net/baidu_41830644/article/details/80411055

版权

最近一个任务要求比较契合这个flex，所以再次去复习flex的相关，这里就不讨论flex的兼容性问题了。

最为一个忠实于float跟position的人，确实很少去接触flex，但如果抛开兼容性，猛然发现flex真的好用。

那首先谈谈什么是flex布局？从英文来看，Flexible Box，大多数翻译为弹性布局，语法如下：

元素选择器 {
    display: flex;
}

细心的同学会发现，是display属性的值耶！那么跟盒模型有什么关系呢？（对于其他元素类型，如inline，

block大家可以自行百度）下面通过一张图来说一下：

（备注：此图从http://www.runoob.com/w3cnote/flex-grammar.html这里引用过来的）

那么先看看图上主要说了什么呢？

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为cross start 和 cross end。
设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 <article> 元素。

属性有：

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

本文主要说说align-items跟justify-content两个属性（下次讲讲flex布局的实际应用）

下来我们举个例子来说明下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compaible" content="IE=Edge">
    <title>Flexbox align 0 — starting code</title>
  </head>
  <body>
    <div>
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
    </div>
  </body>
</html>

设置简单的样式， css代码如下：

body {
    width: 100%;
    max-width: 1080px;
    margin: 20px auto;
}
button {
    font-size: 16px;
    line-height: 1.5;
    width: 20%;
 }
div {
    height: 100px;
    border: 1px solid black;
}

效果如下：

接下来，往css里添加以下代码：

div {
    display: flex;
    align-items: center;
}

效果如下：

也就是设置 display: flex 后，设置align-items起到什么作用呢，从上图来看，使得div下所有的button全部位于“高度”的中间了。

这时我们再从“Flexible Box”图上来分析，align-items控制flex项在交叉轴（cross axis，形象可以认为纵向的轴）上的位置。align-items默认的值时stretch,其会使所有flex项沿着交叉轴（cross axis)的方向拉伸以填充父容器。

注意：如果父容器在交叉轴方向上没有固定宽度（即高度），则所有flex想将变得与最长的flex项一样长（即高度保持一致）。

接下来在添加以下样式：

div {
  /*这是之前的*/
  display: flex;
  align-items: center;
  /*此处新添加*/
  justify-content: space-around;
}

效果图如下：

这里就自适应居中了，那么“justify-content：space-around”究竟起了什么作用呢？我们先把“align-items”的样式去掉看看效果，如图：

先看看两者的共同点，div内的button沿着主轴均匀地分布，并且在任意一端都会留有一点空间。

那再来看看不同点，没有“align-items： center”呈现的是button被拉伸了，可能有同学就发现了上文提到一个点，就是“align-items默认的值时stretch,其会使所有flex项沿着交叉轴（cross axis)的方向拉伸以填充父容器。”

说完两个示例图后，“justify-content：space-around”的作用就是使得flex项沿着主轴（main axis）均匀地分布，并且在任意一端都会留有一点空间。结合“Flexible Box”图，justify-content控制flex项在主轴上的位置（默认是flex-start，这会使所有flex项都位于主轴的开始处。你也可以用flex-end来让flex想到结尾处。

注意：justify-content:space-between，和space-around非常相似，只是它不会在两端留下任何空间。