前端布局-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
文章图片
左侧宽固定，右侧弹性，高度不固定
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;
}
文章图片
导航条
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 布局教程：实例篇
使用自动的外边距在主轴上对齐
推荐阅读
- Jsr303做前端数据校验
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- 织网布局，社群营销走进山东玖零落地企业
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01
- js保留自定义小数点
- 瀑布流布局
- 2018-12-03-新手教程重构思路
- 前端开发|Vue2.x API 学习