Flex布局

时间 2019-12-23

标签 flex 布局栏目 Flex 繁體版

原文原文链接

flex布局

将固定的像素大小转换为弹性比例大小

公式：结果 = 目标/上下文 即 元素大小除以元素所在的容器

弹性布局能够作到什么

方便垂直居中内容
改变元素的视觉次序
在盒子里自动插入空白及其对其元素，自动对其元素间的空白

自从有了flex，float已经能够说是后娘养的了。css

那么问题来了，如何实现flex布局html

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                display: flex;
            }
            
        </style>
    </head>
    <body>
        <div class="flex"></div>
    </body>
</html>

如上面代码，元素设置了display: flex时，就是一个弹性盒子了。布局

在弹性盒子里的块级元素，排成了一行，就如同行内元素同样，和使用float没啥区别。flex

但要注意的是父元素设置了flex后，子元素的float、clear、ertical-align属性将失效。spa

最后行内元素也能够设置flex，不必定要块级元素。code

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                display: flex;
                background: pink;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: skyblue;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

结下了咱们称定义了display: flex为flex容器，而其子元素叫作flex项目htm

主轴和侧轴

默认状况下主轴就是横轴，属性是justify-content，侧轴就是纵轴，属性是align-itemsutf-8

看下这两个属性的值it

justify-content
- flex-start：
  弹性项目向行头紧挨着填充。这个是默认值。其实就是左对齐
- flex-end：
  弹性项目向行尾紧挨着填充。其实就是右对齐。
- center：
  居中对齐（若是剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
- space-between：
  两边对齐，弹性项目平均分布在该行上。若是剩余空间为负或者只有一个弹性项，则该值等同于flex-start。不然，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，而后剩余的弹性项分布在该行上，相邻项目的间隔相等。
- space-around：
  弹性项目平均分布在该行上，两边留有一半的间隔空间。若是剩余空间为负或者只有一个弹性项，则该值等同于center。不然，弹性项目沿该行分布，且彼此间隔相等（好比是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
align-items
- flex-start：上对齐。
- flex-end：下对齐
- center：垂直居中。（若是该行的尺寸小于弹性盒子元素的尺寸则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它状况下，该值将参与基线对齐。
- stretch：若是指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽量接近所在行的尺寸，但同时会遵守'min/max-width/height'属性的限制。

那么用flex布局来实现水平垂直居中对齐就很简单了io

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                
                justify-content: center;
                align-items: center;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: skyblue;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            
        </div>
    </body>
</html>

注意：横轴和纵轴这两个属性是写在flex容器里的，不是写在flex项目的。

能够试着改变横轴和纵轴的属性值，看子元素的位置变化，能够更好的了解flex布局

flex-direction

这个是决定哪一个是主轴，以前默认的主轴就是横轴

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

试下改变代码中flex-direction的属性值，看子元素的变化

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                flex-direction: column;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                
            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

注意：若是你将主轴设置为column或column-reverse，那么属性align-items表明的就是水平的，而属性justify-content是垂直的。其实也就是和默认的主轴反过来了，具体用法和以前主轴为横轴是同样的。

align-self

用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（容许单个子元素与其余子元素不同的对齐方式）

以前的例子来看，子元素都是被统一管理，居中就所有都居中，这个属性就是让某些元素，可以和其余元素有不同的对其方式

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                justify-content: center;
                align-items: center;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;

            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

上面这段代码，子元素都水平垂直居中了，接下来要让第一个子元素，在上方。

改变CSS代码

.flex div:nth-child(1){
    background: green;
    align-self: flex-start;
}

order

项目的排列顺序，越小，排列越靠前

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                justify-content: center;
                align-items: center;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;

            }
            .flex div:nth-child(1){
                background: green;
                order: 2;
            }
            .flex div:nth-child(2){
                background: skyblue;
                order: 3;
            }
            .flex div:nth-child(3){
                background: brown;
                order: 1;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

flex属性

flex 属性用于指定弹性子元素如何分配空间。

flex：int  数值表明该子元素所占据的比例大小

flex是三个属性的融合

flex-grow定义弹性盒子元素的扩展比率。
flex-shrink 定义弹性盒子元素的收缩比率。空间不足时
flex-basis定义弹性盒子元素的默认基准值。

接下来看这段代码

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: #000;
            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

这时候我想让这三个子元素等比例，占满父容器，只要添加flex: 1便可，这个样式也能够写成flex-grow: 1

改变关键CSS代码

.flex div{
    width: 100px;
    height: 100px;
    margin: 10px;
    flex: 1;
    background: #000;
}

以前关于flex的代码都是写在父元素上的，这个flex属性要写在子元素里

接下来再看另外一段代码

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .flex{
                height: 500px;
                display: flex;
                background: pink;
                
            }
            .flex div{
                width: 100px;
                height: 100px;
                margin: 10px;
                background: #000;
            }
            .flex div:nth-child(1){
                background: green;
            }
            .flex div:nth-child(2){
                background: skyblue;
            }
            .flex div:nth-child(3){
                background: brown;
            }
            
        </style>
    </head>
    <body>
        <div class="flex">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        
        </div>
    </body>
</html>

子元素的div变多了，并且宽度被压缩了，如何让宽度保持不变，添加flex-shrink，让其值为0

改变CSS代码

.flex div{
    width: 100px;
    height: 100px;
    margin: 10px;
    flex-shrink: 0;
    background: #000;
}

而后发现一个问题，子元素过多，超过了父级元素，溢出了，这时候就要换行。

flex-wrap

用于指定弹性盒子的子元素换行方式

nowrap 默认，弹性容器为单行。该状况下弹性子项可能会溢出容器。
wrap弹性容器为多行。该状况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse 反转 wrap 排列。

那么这时只要在flex容器设置这个属性就好了

.flex{
    height: 500px;
    display: flex;
    background: pink;
    
    flex-wrap: wrap; 
}

align-content

用于修改 flex-wrap 属性的行为。相似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

若是是正常操做，这时候的页面子元素应该排成两行了，这个属性能够将每一行看作一个flex项目

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

.flex{
    height: 500px;
    display: flex;
    background: pink;
    flex-wrap: wrap;
    
    align-content: space-around;
}

flex容器与flex项目

做用在flex容器的属性

flex-direction
justify-content
align-items
align-content
flex-wrap
flex-flow 这个实际上是flex-direction 和 flex-wrap的复合属性，因此上面并无说到

flex项目的属性

align-self
flex
order