给父元素加:display:flex; 使子元素横向排列,不用在为每一个子元素添加浮动了,父元素也不需要在清除浮动2,高度依然会被子元素撑开
1…弹性布局的基本概念
使用 flex 布局的元素(父元素),称为"容器"
它的所有“子元素”自动成为容器成员,称为 “项目”
它们各自有控制布局的属性,必须是容器包裹着项目
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.d1{
width: 100%;
background-color: yellow;
display: flex;
/* 加上下面这句话效果是一样的 默认效果是从左往右排序
其他属性的值你们可以自行尝试一下*/
flex-direction:row;
}
.item{
width: 100px;
height: 100px;
background-color: red;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="d1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
2.容器到属性
(1)主轴的方向
flex-direction
代表主轴的方向,即项目的排列方向
- row 左向右 ( 默认的)
- row-reverse 右向左
- column 上向下
- column-reverse 下向上
(2)项目换行
默认情况下,项目都排在一条线上。flex-wrap
属性定义如果一条轴线排不下,如何换行的模式
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.d1{
width: 300px;
background-color: yellow;
display: flex;
flex-wrap: wrap;
}
.item{
width: 100px;
height: 100px;
background-color: red;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="d1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
- nowrap 默认不换行
- wrap 换行
- wrap-reverse 反向换行
(3)主轴和换行的简写方式
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
横向排列不换行。
flex-flow: row wrap; 横向换行
(4)主轴上的对齐方式
justify-content
属性定义了项目在主轴上的对齐方式。是默认起点对齐、终点对齐还是居中对齐等。
前提是,如果项目会换行,则下行按照下一行的数量对齐,间隔与上一行可能不同。不换行元素会在容器缩小是缩小,不会出现对齐效果 - center 居中对齐,一起居中
- space-between 两端对齐,项目之间的间隔都相等,左右贴边
- space-around 每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍
(5)多轴线对齐方式
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 - center 与交叉轴的中点对齐。
- space-between 第一行和最后一行贴开始和结束,其他均分中间位置
- space-around 每行间距两侧或上下间距相等,比边框间距大一倍
- stretch 默认值
要想运用这个的时候必须要有主轴才能凸显效果
(6)flex 属性简写
flex 属性是 flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(自动尺寸)的简写,默认值为 0 1 auto。后两个属性可选。
常用设置是:flex:0 0 ??px; 不放大,不缩水,占多少尺寸