CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex)
参考：
http://www.runoob.com/w3cnote/flex-grammar.html
https://www.jianshu.com/p/5856c4ae91f2
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
主要内容：
父级： display:flex; (兼容绝大部分浏览器)：-webkit- 真实工作下使用postCss插件-自动添加浏览器兼容 display: -webkit-flex; /* Safari */ display: flex; *如果使用了弹性布局，子元素不需要使用浮动float 父级身上的常用属性： justify-content： 子元素水平排列 flex-start（默认） 从左开始 flex-end 从右开始 center 居中！！ space-between 两端对齐 space-around 子元素张开手分布 align-items 子元素垂直排列 flex-start（默认） 从上开始 flex-end 从下开始 center 居中！！ stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 baseline: 项目的第一行文字的基线对齐 align-content 多行子元素垂直排列 flex-start： 与交叉轴的起点对齐。 flex-end： 与交叉轴的终点对齐。 center： 与交叉轴的中点对齐。 space-between： 与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around： 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）： 轴线占满整个交叉轴。 flex-flow（基本不用，面试可能会提到） flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap flex-flow: <flex-direction> <flex-wrap>; 举例：flex-flow:column wrap; flex-direction 子元素排列方向 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 flex-wrap 子元素一行排不下如何换行 nowrap（默认）：不换行 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方 子集身上的属性： flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 将行分为定义比例的几份 *子元素在划分父元素宽度，先刨除固定宽度 align-self 允许单个子元素有与其他项目不一样的垂直对齐方式，可覆盖align-items属性 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } flex-grow 定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大 .item { flex-grow: <number>; /* default 0 */ <number>只代表缩放系数 } order 定义子元素的排列顺序。数值越小，排列越靠前，默认为0 .item { order: <integer>; }
练习案例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局案例-淘宝底部导航栏title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.footer-nav{
width: 100%;
height: 60px;
background-color: grey;
display: flex;
position: absolute;
left: 0;
bottom: 0;
}
.footer-nav .tab{
width: 20%;
box-sizing: border-box;
border-left: 1px solid red;
flex: 1;
text-align: center;
line-height: 30px;
font-size: 16px;
color: white;
}
.footer-nav .tab .tab-icon{
height: 30%;
}
style>
head>
<body>
<div class="footer-box">
<div class="footer-nav">
<span class="tab">
<span class="tab-icon glyphicon glyphicon-home">span>
<p class="text">首页p>
span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-shopping-cart">span>
<p class="text">购物车p>
span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-list-alt">span>
<p class="text">订单列表p>
span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-user">span>
<p class="text">我的淘宝p>
span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-option-horizontal">span>
<p class="text">更多p>
span>
<span class="tab">
<span class="tab-icon glyphicon glyphicon-grain">span>
<p class="text">欢度清明p>
span>
div>
div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="style/flex-1.css">
head>
<body>
<div class="outer">
<div class="item div1">1div>
<div class="item div2">2div>
<div class="item div3">3div>
<div class="item div4">4div>
<div class="item">5div>
<div class="item">6div>
<div class="item">7div>
div>
body>
html>
HTML代码
*{ margin: 0; padding: 0; list-style: none; } .outer{ width: 500px; height: 500px; border: 1px solid red; margin: 30px auto; display: flex; flex-wrap: wrap; align-content:flex-start; } .item{ width: 125px; border: 1px solid #ff1bbe; background-color: #0D47A1; height: 125px; box-sizing: border-box; font-size: 32px; color: white; line-height: 125px; text-align: center; align-content: flex-start; }css代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.outer {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 30px auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item {
border: 1px solid #ff1bbe;
background-color: #0D47A1;
height: 125px;
box-sizing: border-box;
font-size: 32px;
color: white;
line-height: 125px;
text-align: center;
}
.div1{width: 80px}
.div2{flex: 1}
.div3{flex: 2}
style>
head>
<body>
<div class="outer">
<div class="item div1">1div>
<div class="item div2">2div>
<div class="item div3">3div>
div>
body>
html>
DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
关于文档元素测试
title>
<style>
#father{
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:center;
height:200px;
background-color:grey;
}
.son1{
height:30px;
width:100px;
background-color:orange;
}
.son2{
height:30px;
width:100px;
background-color:red;
}
.son3{
height:30px;
width:100px;
background-color:#08a9b5;
}
.son4{
height:30px;
width:100px;
background-color:#9ad1c3;
}
.son5{
height:30px;
width:100px;
background-color:rgb(21,123,126);
}
style>
head>
<body>
<div id="father">
<div class="son1">qdiv>
<div class="son2">wdiv>
<div class="son3">ediv>
<div class="son4">ediv>
<div class="son5">ediv>
div>
body>
html>
flex布局换行空白间隙之align-content
参考：https://blog.csdn.net/txfyteen/article/details/82663029