手记

flex布局

flex布局已经是前端中常用的一种布局方式了,目前现代浏览器的支持也不错(IE较差)

各浏览器支持程度.png


下面就一起学习一下flex布局。
在做试验之前先看一个先导概念:


  • Flex布局外层父容器称为Flex容器(flex container),简称”容器”

  • 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

  • 子元素在父元素的主轴上排列,主轴为父元素的横向或纵向,可以自己定义
    示意图(来源:http://www.runoob.com/w3cnote/flex-grammar.html):

    flex布局概念.png

理解完上面的概念后,我们通过在一个容器中试验相关属性来掌握flex布局
先画一个大框作为容器


原始图.png


接下来就在这个容器里各种试验

  1. 先给大容器增加一个display: flex;

<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div></div>
#container {    width: 1000px;    height: 600px;    border: 1px solid crimson;    margin-left: 100px;    display: flex;  
}.box {    width: 100px;    height: 100px;    background-color: yellow;
}

容器添加display:flex属性.png


目前一切正常
接下来给容器添加一些属性

  1. flex-direction

  • flex-direction: row

    容器添加flex-direction属性.png

  • flex-direction: row-reverse

    容器添加flex-direction: row-reverse属性.png

  • flex-direction: column

    容器添加flex-direction: column属性.png

  • flex-direction: column-reverse

    容器添加flex-direction: column-reverse属性.png

  1. flex-wrap

  • flex-wrap: nowrap
    这样会强制不换行,每个子元素会被压缩

#container {  width: 1000px;  height: 600px;  border: 1px solid crimson;  margin-left: 100px;  display: flex;  flex-wrap: nowrap;
}.box {  width: 300px;  height: 100px;  background-color: yellow;
}

容器添加flex-wrap: nowrap属性.png

  • flex-wrap: wrap

    容器添加flex-wrap: wrap属性.png

  1. justify-content
    搞明白子元素的排序,接下来看怎么控制每个子元素的对齐情况

  • justify-content: flex-start

    容器添加justify-content: flex-start属性.png

  • justify-content: flex-end

    容器添加justify-content: flex-end属性.png

  • justify-content: space-around

    容器添加justify-content: space-around属性.png

  • justify-content: space-between

    容器添加justify-content: space-between属性.png

  1. align-items

  • align-items: center

    容器添加align-items: center属性.png

  • align-items: flex-end

    容器添加align-items: flex-end属性.png

  1. align-content
    除了控制单个子元素的相对位置,所有轴线的相对位置也可控

  • align-content: flex-end

    容器添加align-content: flex-end属性.png

  • align-content: center

    容器添加align-content: center属性.png


    容器属性说完了,再来研究一下元素属性

  1. order
    order控制子元素的优先级

  #box1 {    order: 100;
  }

子元素添加order属性.png

  1. flex-grow/flex-shrink
    flex-grow/flex-shrink控制子元素的大小,在空间足够的情况下会按数字比例扩大/缩小

#box1 {  flex-grow: 2;  background-color: coral;
}

子元素添加flex-grow属性.png

  1. flex-basis
    flex-basis控制单个子元素在主轴占据空间的大小

.box {  width: 300px;  height: 100px;  background-color: yellow;
}#box1 {  flex-basis: 100px;  background-color: coral;
}

子元素添加flex-basis属性.png

  1. align-self
    align-self可以控制单个子元素在主轴上的对齐位置

    子元素添加align-self: flex-end属性.png


    子元素添加align-self: center属性.png

至此,flex布局就全部介绍完了,完全理解这些属性后灵活搭配它们就可以在页面布局中使用啦。



作者:NSO
链接:https://www.jianshu.com/p/9eb36117fabe


1人推荐
随时随地看视频
慕课网APP