前端布局-flex 前端布局-flex

1. 简介 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
flex是一种一维的布局，一次只能处理一行或一列。作为对比的是grid布局，它是二维布局，可以同时处理行和列上的布局（稍后会写另一篇笔记）。
任何一个容器都可以指定为 Flex 布局。设为 Flex 布局以后，容器中的直系子元素就会变成flex元素。flex元素的float、clear和vertical-align属性将失效。

item1 item2.flex{ display: -webkit-flex; /* Safari */ display:flex; }

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的简写，默认为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: ; /*项目的排列顺序。数值越小，排列越靠前，默认为0*/ flex-grow: ; /* 项目的放大比例，默认为0，即如果存在剩余空间，也不放大*/ flex-shrink: ; /*项目的缩小比例，默认为1，即如果空间不足，该项目将缩小*/ flex-basis: | 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.常用效果实现

文章图片
左侧宽固定，右侧弹性，高度不固定

left fix 50px right auto.flex{ display: -webkit-flex; /* Safari */ display:flex; height:100px; } .flex .item-1{ width:50px; } .flex .item-2{ flex:1; }

文章图片
上下左右居中

上下左右居中.flex{ display: -webkit-flex; /* Safari */ display:flex; justify-content:center; align-items:center; height:50px; border:1px solid #ccc; } .flex .item-1{ background:green; }

文章图片
导航条

项目1 项目2 个人中心帮助 nav ul { display: flex; margin: 0 -10px; list-style:none; padding:0; } nav li { margin: 0 10px; } .push-right { margin-left: auto; /*使用margin:auto在主轴上对齐*/ }

文章图片
圣杯布局

headercontent left rightcenter .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; } }

文章图片
骰子

.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; }

示例代码
【前端布局-flex】参考：阮一峰老师的教程：
Flex 布局教程：语法篇
Flex 布局教程：实例篇
使用自动的外边距在主轴上对齐