文章目录
一、flex布局概念
Flex 布局，它主要用来代替浮动来完成页面的布局，可以简便、完整、响应式地实现各种页面布局，只要容器设置了display：flex属性，就拥有了一个弹性盒属性 多用于移动端布局
二、flex布局属性
1.容器属性
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
2.元素属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
三、弹性容器属性
对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。弹性容器属性都是设置给弹性容器的
- 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
- 每根轴都有起点和终点，这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
- 弹性元素也可以通过
display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
1.flex-direction
更改主轴排列方向 ，默认值是row
可选值：
- row 默认值，弹性元素在容器中水平排列（左向右）
- column 弹性元素纵向排列（自上向下）
- row-reverse 弹性元素在容器中反向水平排列（右向左）
- column-reverse 弹性元素方向纵向排列（自下向上）
flex-direction:row
flex-direction:columnm
flex-direction:row-reverse
flex-direction: column-reverse
2.flex-wrap
设置弹性元素是否在弹性容器中自动换行,默认不换行,如果弹性元素超出父元素宽度,则等比例压缩
可选值：
- nowrap 默认值，元素不会自动换行
- wrap 元素沿着辅轴方向自动换行
- wrap-reverse 元素沿着交叉轴反方向换行
flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse
3.flex-flow
flex-direction和flex-wrap属性的简写，默认属性为row nowrap，即横向排列，且不换行，如果需要控制元素排列与换行，推荐使用此属性，而非单独写两个。
4.justify-content
设置主轴对齐方式,默认flex-start即左对齐
可选值：
- flex-start 元素沿着主轴起边排列
- flex-end 元素沿着主轴终边排列
- center 元素居中排列
- space-around 空白分布到元素两侧
- space-between 空白均匀分布到元素间
- space-evenly 空白分布到元素的单侧，即每块空白区域都相等
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-around
justify-content: space-between
justify-content: space-evenly
5.align-items
设置交叉轴的对齐方式，默认stretch即如果元素没设置高度，或高度为auto，则占满整个容器
可选值：
- stretch 默认值，将元素的长度设置为相同的值
- flex-start 元素不会拉伸，沿着辅轴起边对齐
- flex-end 沿着辅轴的终边对齐
- center 居中对齐
- baseline 文字对齐
align-items: stretch
align-items: flex-start
align-items: flex-end
align-items: center
align-items:baseline
注意，常理来说justify-content与align-items默认分别处理元素主轴，交叉轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理交叉轴，align-items处理主轴。
6.align-content
用于控制多行元素的对齐方式，如果元素只有一行则不会起作用，需设置flex-wrap: wrap；默认stretch，即在元素没设置高度，或高度为auto情况下让元素填满整个容器，与align-items类似。
可选值：
- stretch 默认值，将元素的长度设置为相同的值
- flex-start 元素沿着交叉轴起边排列
- flex-end 元素沿着交叉轴终边排列
- center 元素居中排列
- space-around 空白分布到元素两侧
- space-between 空白均匀分布到元素间
- space-evenly 空白分布到元素的单侧
align-items: stretch
align-items: flex-start
align-items: flex-end
align-items:center
align-items:space-around
align-items:space-between
align-items:space-evenly
四、弹性元素属性
介绍完容器属性，简单介绍下弹性元素属性。容器属性是加在父容器上的，那么弹性元素属性呢，就是写在弹性元素上的，就好比容器属性给ul，项目属性给li差不多一个意思。
1.order
控制元素排序顺序 值越小越靠前 order默认是0
<style lang="">
/* 设置父容器样式 */
.container {
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
/* 容器属性 --设置给父元素 */
/* 开启弹性盒布局 */
/* 弹性元素沿主轴方向排列**** */
display: flex;
}
/* 设置子元素样式 */
.container div {
width: 60px;
height: 50px;
color: white;
}
.div1 {
order: 3;
}
.div2 {
order: 2;
}
.div3 {
order: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: greenyellow;">弹性元素2</div>
<div class="div3" style="background-color: yellow;">弹性元素3</div>
</div>
</body>
2.flex-grow
默认0，用于决定元素在有剩余空间的情况下是否放大，默认不放大；
假设默认三个元素中前两个个元素都是0，最后一个是1，最后的项目会占满剩余所有空间
假设只有第一个元素默认为0，后面两个元素flex-grow均为1，那么后两个元素平分剩余空间。
3.flex-shrink
剩余空间不足是否等比例压缩 默认是1 等比例压缩
但如果某个元素flex-shrink设置为0，则即便空间不够，自身也不缩小。
4.flex-basis
默认auto，用于设置元素宽度，默认auto时，元素会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。
5.flex
默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义元素放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
还有最常用的flex:1 === flex: 1 1 0px
6.flex-self
设置弹性元素自身交叉轴对齐的方式
用于让个别元素拥有与其它元素不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
可选值：
- auto
- stretch 默认值，将元素的长度设置为相同的值
- flex-start 元素不会拉伸，沿着辅轴起边对齐
- flex-end 沿着辅轴的终边对齐
- center 居中对齐
- baseline 文字对齐
<style lang="">
/* 设置父容器样式 */
.container {
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
/* 容器属性 --设置给父元素 */
/* 开启弹性盒布局 */
/* 弹性元素沿主轴方向排列**** */
display: flex;
/* 设置交叉轴对齐方式 */
align-items: center;
}
/* 设置子元素样式 */
.container div {
width: 60px;
height: 50px;
color: white;
}
.div2 {
/* align-self设置弹性元素自身交叉轴对齐的方式 */
align-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: greenyellow;">弹性元素2</div>
<div class="div3" style="background-color: yellow;">弹性元素3</div>
</div>
</body>
其他属性同align-items不做过多赘述。
五、媒体查询
1.媒体查询的概念
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
媒体查询：当页面的结构发生变化的话最好使用媒体查询。
弹性盒：如果只是宽高的变化，尽量使用弹性盒
2.媒体查询使用方法
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.class {
display: none;
}
}
</style>
3.@media 媒体类型 and （媒体特性）{你的样式}
使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。
- 媒体类型
| all | 所有媒体（默认值） |
|---|---|
| screen | 彩色屏幕 |
| 打印预览 |
- 媒体属性
| width | （可加max min前缀） |
|---|---|
| height | （可加max min前缀） |
| device-width | （可加max min前缀） |
| orientation | portrait竖屏/landscape横屏 |
- 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。
@media screen and (max-width:580px){
body {
background-color: red;
}
}
上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。
- 最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px
- 多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。
当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:blue;}
}
扫一扫
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
