乐趣区

关于flex:一个后端写的Flex布局笔记

背景

我的强项是后端开发,很少波及前端开发,一个很重要的起因是前端布局太妖,要实现一个居中须要各种奇技淫巧,而且每个浏览器实现还不一样,前端的布局就像谜一样,你都不晓得为啥就能够了,也不晓得为啥就不行。直到 Flex 布局的呈现前端的布局终于有点章法了,第一次接触 Flex 布局是从阮一峰的博客 Flex 布局教程,阮一峰写博客的能力的确厉害,通俗易懂又直击要害,倡议想要入门 Flex 都去拜读一下。那么写这篇文章的目标是从一个后端的角度去看 Flex 布局,如果你看完阮一峰的博客后依然有一些疑难,那么能够读一读这篇文章。

Flex 基本概念

  • 容器和我的项目

Flex 布局包含容器 (flex container) 和我的项目(flex item),比方上面这段代码

<div class="content">
    <div class="block"></div>
    <div class="block"></div>
</div>

content 这个 div 就是容器,block 的 div 就是我的项目

  • 两轴两个方向

Flex 外围就是靠两根轴进行布局的调整,其实就是程度和垂直两个方向,只不过在 Flex 中程度方向称为主轴,垂直方向称为穿插轴,每个方向各有 start center end 三个方位,其实就是右边两头和左边三个方位。

容器属性

flex 有以下几个属性能够作用于容器上

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

咱们一个个来

flex-direction

flex-direction指定了 Flex 布局的方向,其实最外围就是指定了是横向排列还是纵向排列,flex-direction 有以下取值

  • row(默认值):横向排列
  • row-reverse:反向横向排列
  • column:纵向排列
  • column-reverse:反向纵向排列

如下代码

<html>
<head>
    <style>

        .container {
            display: flex;
            background-color: aliceblue;
        }

        .box1 {
            width: 80px;
            height: 80px;
            margin: 5px;
            background-color: orange;
        }

        .box2 {
            width: 40px;
            height: 100px;
            margin: 5px;
            background-color: orange;
        }

        .box3 {
            width: 100px;
            height: 30px;
            margin: 5px;
            background-color: orange;
        }
    </style>
</head>

<body>
<div class="container" style="flex-direction: row">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>
</html>

flex-direction: row 成果

flex-direction: row-reverse 成果

flex-direction: column 成果

flex-direction: column-reverse 成果

留神到无论是横向对齐(row)垂直方向默认顶部对齐,垂直对齐(column)默认对齐形式是左对齐

justify-content

justify-content 指定了程度方向的排列形式,留神这里我用的是排列形式不是其余中央说的对齐形式,因为我感觉排列这个词更适宜形容 justify-content,justify-content 能够取以下值:

  • flex-start(默认值):从左向右排列
  • flex-end:从右向左排列
  • center:居中排列
  • space-between:两端对齐,我的项目之间的距离都相等。
  • space-around:每个我的项目两侧的距离相等。所以,我的项目之间的距离比我的项目与边框的距离大一倍。

flex-start 从左向右排列

flex-end 从右向左排列

留神和 flex-direction: row-reverse 不同,row-reverse 对排列程序进行了反向

center 居中排列

space-between 两端对齐

space-around 每个我的项目两侧的距离相等

通过以上实例能够看出,用对齐来形容短少直观印象,用排列比拟适宜形容

align-items

align-items 指定了垂直方向的对齐形式,留神这里用的是对齐这个词,align-items 可取以下值:

  • flex-start:顶部对齐
  • flex-end:底部对齐
  • center:居中对齐
  • baseline: 我的项目的第一行文字的基线对齐。
  • stretch(默认值):如果我的项目未设置高度或设为 auto,将占满整个容器的高度。

flex-start 顶部对齐

flex-end 底部对齐

center 居中对齐

baseline 我的项目的第一行文字的基线对齐

为了展现 baseline 成果,咱们批改下代码

<div class="container" style="flex-direction:row;align-items: baseline;">
  <div class="box1" style="font-size: 50px">1</div>
  <div class="box2">2</div>
  <div class="box3" style="font-size: 30px">3</div>
</div>

stretch 占满容器高度

如果未设置高度,将占满屏幕,咱们将 box 的 height 属性去掉

.container{
  display: flex;
  height: 100px;
  background-color: aliceblue;
}

.box1 {
    width: 80px;
    margin: 5px;
    background-color: orange;
}

.box2 {
    width: 40px;
    margin: 5px;
    background-color: orange;
}

.box3 {
    width: 100px;
    margin: 5px;
    background-color: orange;
}

flex-wrap

flex-wrap 指定了如果一行放不下该如何解决,取值如下:

  • nowrap(默认):不换行
  • wrap:换行,接在第一行上面
  • wrap-reverse:换行,接在第一行下面

咱们在下面的代码退出一个 box4

.box4{
  width:600px;
  height: 80px;
  margin: 5px;
  background-color: orange;
}
....
<div class="container" style="flex-direction:row;flex-wrap: wrap-reverse;">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

nowrap:不换行

flex 会强行放在一行,并且如果长度不够会压缩其余内容

wrap:换行,接在第一行上面

wrap-reverse:换行,接在第一行下面

flex-flow

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

.box {flex-flow: <flex-direction> || <flex-wrap>;}

align-content

align-content 定义了当有多行的时候,每行之间该如何排列,取值如下

  • stretch(默认值):在垂直方向占满空间
  • flex-start:每行排列在垂直方向顶部
  • flex-end:每行排列在垂直方向底部
  • center:每行排列在垂直方向两头
  • space-between:每行在垂直方向两端对齐
  • space-around:每行在垂直方向距离相等

stretch(默认值):在垂直方向占满空间

咱们去掉每个 box 的高度,并且退出了一个新的 box5

<html>
<head>
<style>

.container{
  display: flex;
  height: 100%;
  background-color: aliceblue;
}
.box1{
  width:80px;
/*  height: 80px;
*/  margin: 5px;
  background-color: orange;
}
.box2{
  width:40px;
/*  height: 100px;
*/  margin: 5px;
  background-color: orange;
}
.box3{
  width:100px;
/*  height: 30px;
*/  margin: 5px;
  background-color: orange;
}
.box4{
  width:600px;
/*  height: 80px;
*/  margin: 5px;
  background-color: orange;
}
.box5{
  width:800px;
  /*height: 50px;*/
  margin: 5px;
  background-color: orange;
}
</style>
</head>

<body>
<div class="container" style="flex-direction:row;flex-wrap: wrap;">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>
</body>
</html>

肯定要用 flex-wrap: wrap; 不然无奈造成多行

flex-start:每行排列在垂直方向顶部

把高度加回去

能够看到容器底部还是留了一部分空间,高度依照配置的高度显示

flex-end: 每行排列在垂直方向底部

center:每行排列在垂直方向两头

space-between:每行在垂直方向两端对齐

space-around:每行在垂直方向距离相等

我的项目属性

我的项目属性蕴含以下 6 项

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

flex-grow

flex-grow 定义了当容器长度增长时容器内的我的项目该当如何变动,这里定义的是一个变动的权值,比方有两个我的项目,一个 flex-grow= 4 一个 flex-grow= 6 那么当容器长度增长 10 个像素时,第一个我的项目增长 4 个像素,第二个增长 6 个像素,这样当长度增长时可能填满整个空间。当然如果所有的我的项目 flex-flow 都一样那么将平分残余的空间。

<div class="container" style="flex-direction:row;">
  <div class="box1" style="flex-grow: 1"></div>
  <div class="box2" style="flex-grow: 2"></div>
  <div class="box3" style="flex-grow: 3"></div>
</div>

如果 flex-flow 设置为 0(默认值)则不会主动增长

flex-shrink

flex-shrink 和 flex-grow 相同,flex-shrink 是当长度缩小时该如何压缩我的项目空间,也是定义权值

order

order 能够设置显示程序,如以下代码

<div class="container" style="flex-direction:row;">
  <div class="box1" style="order: 3">1</div>
  <div class="box2" style="order: 2">2</div>
  <div class="box3" style="order: 1">3</div>
</div>

指定了 order 就按 order 指定的程序显示(这个属性的利用场景在哪?)

flex-basis

flex-basis 定义了我的项目在容器中的初始值,如果是程度方向那么就是长度,如果是垂直方向那么就是高度,默认是 auto 就是我的项目原大小,这个属性能够笼罩自身的 width 和 height

<div class="container" style="flex-direction:row;">
  <div class="box1" style="flex-basis:400px"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

flex

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto。

align-self

align-self 容许单个我的项目不一样的排列形式,能够笼罩 align-items 属性,后面提到过,align-items 定义了垂直方向的对齐形式

<div class="container" style="flex-direction:row;align-items: flex-start;">
  <div class="box1"></div>
  <div class="box2" style="align-self: flex-end;"></div>
  <div class="box3"></div>
</div>

参考

这里有一个 Flex 游戏的站点,通过 24 个小游戏让你学会应用 Flex 相干属性

退出移动版