flex布局的学习总结

最新推荐文章于 2022-07-10 18:09:22 发布

sunyueru

最新推荐文章于 2022-07-10 18:09:22 发布

阅读量455

点赞数

分类专栏：前端开发文章标签： flex 布局

本文链接：https://blog.csdn.net/sunyueru/article/details/75126342

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言：因为做任务十涉及到flex布局，所以索性花了一个上午的时间好好看了一遍。之前也看了，但是没有做实战练习，所以很多属性还是很容易忘记。其实就是熟能生巧的事情啦。

以下的所有总结都还未涉及到浏览器兼容的问题，只针对不同的属性做介绍。具体的语法介绍可以看阮一峰的教程：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

二、项目的属性
①order：项目排列顺序。默认为0（越大排的越后面）
②flex-grow：项目放大比例。默认为0（即不放大）
③flex-shrink：项目所需比例。默认为1（即空间不足就缩小）
④flex-basis：项目占主轴的空间（长度）。默认为auto
.item{
flex-basis:length|auto
}
⑤flex：2，3，4的结合。默认为 0 1 auto
.item{
flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
}
flex：none（0 0 auto），flex：auto（1 1 auto）
⑥align-self:定义单个项目的对齐方式。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

几个应用栗子：

一、百分比布局：

<!DOCTYPE html>
<html>
<head>
    <title>百分比布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        .Grid{
            display: flex;
        }
        .Grid-cell{
            flex: 1;
            margin-bottom: 10px;
        }
        .u-1of2{
            flex: 0 0 50%;
        }
        .u-1of3{
            flex: 0 0 33.333%;
        }
        .u-1of4{
            flex:0 0 25%;
        }

    </style>
</head>
<body>
    <div class="Grid">
        <div class="Grid-cell u-1of3" style="background-color: red">1/3</div>
        <div class="Grid-cell" style="background-color: green">auto</div>
        <div class="Grid-cell u-1of4" style="background-color: red"></div>
    </div>
    <div class="Grid">
        <div class="Grid-cell u-1of3" style="background-color: red">1/3</div>
        <div class="Grid-cell" style="background-color: green">auto</div>
        <div class="Grid-cell u-1of2" style="background-color: red"></div>
    </div>
    <div class="Grid">
        <div class="Grid-cell" style="background-color: red">auto</div>
        <div class="Grid-cell u-1of4" style="background-color: green">1/4</div>
        <div class="Grid-cell u-1of2" style="background-color: red">1/2</div>
    </div>
</body>
</html>

这里写图片描述

二、骰子

 <!DOCTYPE html>
<html>
<head>
    <title>flex布局实战3</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            /*设置样式*/
            width: 100px;
            height: 100px;
            padding:10px;
            background-color: #ccc;
            border-radius: 5px;
            /*关键代码*/
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

        }
        .column{
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }
        /*设置圆点*/
        .item{
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #000;
            border-radius: 10px;
            margin:5px;
        }

    </style>
</head>
<body>
   <div class="box">
      <div class="column">
          <span class="item"></span>
          <span class="item"></span>
      </div>
      <div class="column">
          <span class="item"></span>
          <span class="item"></span>
      </div>
   </div>
</body>
</html>
<!-- 有点嵌套的意思，box里面的元素是column，column里面的元素是item -->