亲宝软件园·资讯

展开

Flex布局

妥瑞小胖墩 人气:1

flex布局

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

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

弹性布局可以做到什么

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

自从有了flex，float已经可以说是后娘养的了。

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

<!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后，子元素的float、clear、ertical-align属性将失效。

最后行内元素也可以设置flex，不一定要块级元素。

<!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项目

主轴和侧轴

默认情况下主轴就是横轴，属性是justify-content，侧轴就是纵轴，属性是align-items

看下这两个属性的值

  • 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布局来实现水平垂直居中对齐就很简单了

<!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

加载全部内容
相关教程
猜你喜欢
用户评论