flex简介
- flex:弹性盒布局,这是一个针对布局的技术,之前是-table,div,css,position,float等;
- 在flex容器中,所有元素都是行内块;
- 在flex容器中,页面存在二个布局的参考轴,一个叫做主轴(元素的排列),还有一个交叉轴,控制元素的换行方向;
1、术语
1、容器:具有”display:flex”属性的元素
2、项目:flex容器的子元素
3、主轴:项目排列的轴线
4、交叉轴:与主轴垂直的轴线2、容器属性
1、 flex-flow 主轴方向与换行方式
2、 justify-content 项目与主轴上的对齐方式
3、 align-items 项目在交叉轴上的对齐方式
4、 align-content 项目在多行容器中的对齐方式3、项目属性
1、flex 项目的缩放比例与基准宽度
2、align-self 单个项目在交叉轴上的对齐方式
3、order 项目在主轴上的排列顺序主轴排列
flex-direction:row |column;设置主轴;
flex-wrap:nowrap 换行
简写:flex-flow:row nowrap
垂直排列
效果图<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-flow: column nowrap;
}
.container .item {
width: 5em;
height: 5em;
border: 1px solid #ccc;
padding: 1em;
margin: 1em;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
单行容器对齐方式
主轴对齐方式justify-content
设置项目在单行容器上的对齐前提:主轴上存在剩余空间
空间分配
1、将所有项目作为一个整体,在项目组俩边进行分配;
justify-content:flex-start 左对齐
justify-content:flex-end 右对齐
justify-content:flex-center 居中对齐
2、将项目作为单个独立个体,在项目之间进行分配;
justify-content:space-between 俩端对齐
justify-content:space-around 分散对齐
justify-content: space-evenly 平均对齐
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
border: 1px solid #ccc;
display: flex;
/* 左对齐 */
justify-content: flex-start;
/* 右对齐 */
justify-content: flex-end;
/* 居中对齐 */
justify-content: center;
/* 俩端对齐 */
justify-content: space-between;
/* 分散对齐 */
justify-content: space-around;
justify-content: space-evenly;
}
.container .item {
width: 5em;
height: 5em;
border: 1px solid #ccc;
padding: 1em;
margin: 1em;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
交叉轴对齐方式 align-items
1、默认拉伸 align-items: stretch;
2、上对齐 align-items: flex-start;
3、下对齐 align-items: flex-end;
4、居中对齐 align-items: center;
多行容器对齐方式 align-content
1、拉伸 align-content: stretch;
2、上对齐 align-content: flex-start;
3、下对齐 align-content: flex-end;
4、俩端对齐 align-content: space-between;
5、分散对齐 align-content: space-around;
6、平均对齐 align-content: space-evenly;
项目属性 flex
用在容器项目上的属性 flex:放大因子 收缩因子 基准宽度
默认值 不放大 可收缩 当前容器中的widh;
flex:0 1 auto;
简写flex:initial;
允许放大和收缩
flex:1 1 auto;
简写flex:auto;
禁止放大和收缩
flex:0 0 auto;
简写flex:none;
如果只有一个数字,省掉后面第二个参数表示的是放大因子
flex:1等价于 flex:1 1 auto;
flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征;
单个项目对齐方式align-self;支持定位项目在主轴上的显示顺序
order:数值
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
border: 1px solid #ccc;
display: flex;
flex-flow: row wrap;
}
.container .item {
width: 5em;
height: 5em;
border: 1px solid #ccc;
padding: 1em;
margin: 1em;
}
.container .item:first-of-type {
order: 4;
background-color: wheat;
}
.container .item:last-of-type {
order: 1;
background-color: yellowgreen;
}
</style>
<body>
<div class="container">'
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
效果图
flex嵌套
实际工作中flex嵌套应用很多
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: flex;
}
.container .item {
width: 5em;
height: 5em;
border: 1px solid #ccc;
padding: 1em;
margin: 1em;
}
.container .item:nth-of-type(4) {
display: flex;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</div>
</body>
效果图
flex快速实现水平垂直居中
- justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
- align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
<style>
.box {
width: 15em;
height: 15em;
background-color: seagreen;
display: flex;
justify-content: center;
align-items: center;
}
.box div {
width: 5em;
height: 5em;
background-color: sienna;
}
</style>
<body>
<div class="box">
<div></div>
</div>
</body>
效果图
flex实现简单三列布局
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header,
footer {
height: 8vh;
background-color: steelblue;
}
.container {
height: calc(84vh - 1em);
display: flex;
margin: .5em 0;
}
.container aside {
min-width: 15em;
background-color: turquoise;
}
.container main {
min-width: calc(100% - 31em);
background-color: wheat;
margin: 0 .5em;
}
</style>
<body>
<header>头部</header>
<div class="container">
<aside>左侧</aside>
<main>内容</main>
<aside>右侧</aside>
</div>
<footer>底部</footer>
</body>
效果图