前端布局-flex
2019-05-10 本文已影响0人
justnomomo
1. 简介
Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
flex是一种一维的布局，一次只能处理一行或一列。作为对比的是grid布局，它是二维布局，可以同时处理行和列上的布局（稍后会写另一篇笔记）。
任何一个容器都可以指定为 Flex 布局。设为 Flex 布局以后，容器中的直系子元素就会变成flex元素。flex元素的float、clear和vertical-align属性将失效。
<div class="flex">
<div class="item item-1">item1</div>
<div class="item item-2">item2</div>
</div>
<style>
.flex{
display: -webkit-flex; /* Safari */
display:flex;
}
</style>
2.属性介绍
2.1 容器属性
.flex {
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse; /*决定主轴的方向（即项目的排列方向），默认为row*/
flex-wrap: nowrap | wrap | wrap-reverse;/*如果一条轴线排不下，如何换行，默认为nowrap*/
flex-flow: <flex-direction> || <flex-wrap>;/*flex-direction和flex-wrap的简写，默认为row nowrap*/
justify-content: flex-start | flex-end | center | space-between | space-around;/*项目在主轴上的对齐方式，默认flex-start*/
align-items: flex-start | flex-end | center | baseline | stretch;/*项目在交叉轴上的对齐方式，默认stretch*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;/*多根主轴的对齐方式。若只有一根主轴，属性无效，默认stretch*/
}
2.2 子元素属性
.item {
order: <integer>; /*项目的排列顺序。数值越小，排列越靠前，默认为0*/
flex-grow: <number>; /* 项目的放大比例，默认为0，即如果存在剩余空间，也不放大*/
flex-shrink: <number>; /*项目的缩小比例，默认为1，即如果空间不足，该项目将缩小*/
flex-basis: <length> | auto;/*在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目内容的尺寸。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间*/
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; /*是flex-grow，flex-shrink，flex-basis的简写，默认是0 1 auto。none等同于0 0 auto，auto等同于1 1 auto*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;/*设置单个项目的对齐方式，可覆盖align-items属性，默认为auto，表示继承父元素的align-items属性，若没有父元素，则等同于stretch*/
}
flex元素默认行为即：
- 元素排列为一行（flex-direction为row)
- 元素从主轴的起始线开始（justify-content为flex-start)
- 元素不会在主维度方向拉伸，但是可以缩小（flex-grow为0，flex-shrink为1）
- 元素被拉伸来填充交叉轴大小（align-items为stretch）
- flex-basis为auto
- flex-wrap为nowrap
3.常用效果实现
左侧宽固定，右侧弹性，高度不固定
<div class="flex">
<div class="item-1">left fix 50px</div>
<div class="item-2">right auto</div>
</div>
<style>
.flex{
display: -webkit-flex; /* Safari */
display:flex;
height:100px;
}
.flex .item-1{
width:50px;
}
.flex .item-2{
flex:1;
}
</style>
上下左右居中
<div class="flex">
<div class="item-1">上下左右居中</div>
</div>
<style>
.flex{
display: -webkit-flex; /* Safari */
display:flex;
justify-content:center;
align-items:center;
height:50px;
border:1px solid #ccc;
}
.flex .item-1{
background:green;
}
</style>
导航条
<nav>
<ul>
<li><a href="#">项目1</a></li>
<li><a href="#">项目2</a></li>
<li class="push-right"><a href="#">个人中心</a></li>
<li><a href="#">帮助</a></li>
</ul>
</nav>
<style>
nav ul {
display: flex;
margin: 0 -10px;
list-style:none;
padding:0;
}
nav li {
margin: 0 10px;
}
.push-right {
margin-left: auto; /*使用margin:auto在主轴上对齐*/
}
</style>
圣杯布局
<div class="flex">
<div class="item-header">header</div>
<div class="item-main">
<div class="item-content">content</div>
<div class="item-left">left</div>
<div class="item-right">right</div>
</div>
<div class="item-footer">
<p>center</p>
</div>
</div>
<style>
.flex{
display: -webkit-flex; /* Safari */
display:flex;
flex-direction:column;
border:1px solid #ccc;
height: 100vh;
}
.flex .item-header{
height:30px;
border-bottom:1px solid #ccc;
}
.flex .item-footer{
height:30px;
border-top:1px solid #ccc;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.flex .item-main{
flex-grow:1;
display:flex;
}
.flex .item-left{
order:-1;
flex-basis:50px;
border-right:1px solid green;
background:pink;
}
.flex .item-right{
flex-basis:50px;
border-left:1px solid green;
background:yellow;
}
.flex .item-content{
flex-grow:1;
background:red;
}
@media (max-width: 350px) {
.flex .item-main {
flex-direction: column;
flex-grow:1;
}
.flex .item-left,
.flex .item-right,
.flex .item-content {
flex: auto;
}
}
</style>
骰子
<div class="saizi">
<div class="flex flex-4 flex-4-1">
<div class="item"></div>
</div>
<div class="flex flex-4 flex-4-2">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="flex flex-4 flex-4-3">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="flex flex-4 flex-4-4">
<div class="row">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="flex flex-4 flex-4-5">
<div class="row">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="flex flex-4 flex-4-6">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
<style>
.saizi{
border:1px solid #ccc;
}
.flex-4{
width:50px;
height:50px;
border:1px solid black;
display:inline-flex;
border-radius:4px;
vertical-align:top;
padding:5px;
}
.flex-4 .item{
background:black;
width:15px;
height:15px;
border-radius:50%;
}
.flex-4-1{
justify-content:center;
align-items:center;
}
.flex-4-2{
justify-content:space-around;
align-items:center;
}
.flex-4-3{
justify-content:space-around;
}
.flex-4-3 .item:nth-child(2){
align-self:center;
}
.flex-4-3 .item:nth-child(3){
align-self:flex-end;
}
.flex-4-4{
flex-direction:column;
justify-content:space-around;
}
.flex-4-4 .row{
display:flex;
width:100%;
justify-content:space-around;
}
.flex-4-5{
justify-content:space-around;
}
.flex-4-5 .row{
width:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.flex-4-5 .row:nth-child(2){
justify-content:center;
}
.flex-4-6{
justify-content:space-around;
}
.flex-4-6 .row{
display:flex;
flex-direction:column;
justify-content: space-around;
}
</style>
参考：阮一峰老师的教程：
Flex 布局教程：语法篇
Flex 布局教程：实例篇
使用自动的外边距在主轴上对齐
