flex布局的学习总结

来源：互联网发布：vim for mac 编辑：程序博客网时间：2024/06/05 08:41

前言：因为做任务十涉及到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 -->

这里写图片描述

还有其他的应用，见：
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

阅读全文

0 0