文章目录
0.前言
发现了自己在flex布局上的一个知识漏洞:
那就是一直认为存在三条轴,主轴,侧轴和交叉轴,
它们分别是通过justify-content,align-items和align-content来设置对齐方式的
实际上侧轴又叫做交叉轴,与主轴方向垂直,
只有单行内容时,通过align-items设置对齐方式,
若有多行内容,可以通过align-content设置对齐方式
借此梳理一下这方面的内容
1.设置flex布局后的父子元素
父元素设置display:flex,被称为Flex容器（flex container），简称”容器”;
此时子元素会默认横向排列.自动成为容器成员,称为Flex项目（flex item），简称”项目”(也被称为灵活元素)。
2.容器(父元素)的属性
- 设置主轴方向:
flex-direction:row(默认)|row-reverse|column|column-reverse - 设置灵活元素(子元素)是否换行:
flex-wrap:nowrap(默认)|wrap|wrap-reverse - 主轴对齐方式:
justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly - 侧轴(交叉轴)对齐方式[单行]:
align-items:flex-start|flex-end|center|stretch|baseline - 侧轴(交叉轴)对齐方式[多行]:
align-content:flex-start|flex-end|center|space-between|space-around|space-evenly - 设置主轴方向和是否换行可以简写为:
flex-flow:<flex-direction> <flex-flow>
3.项目(子元素)的属性
- 设置单个子元素不一样的对齐方式:
align-self:flex-start|flex-end|center|strech|baseline|auto(跟父元素的align-items值一样) - 定义项目的排列顺序(数值越小排列越靠前):
order:0(默认) - 定义项目的放大比例:
flex-grow:0(默认) -
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间
- 定义项目的缩小比例:
flex-shrink:1(默认) -
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小
- 在分配多余空间之前，项目(子元素)占据的主轴空间:
flex-basis:auto(默认) -
- 可以设置为与宽或高一样的值,使项目占据固定空间
- flex-grow, flex-shrink 和 flex-basis的简写的符合属性:
flex:0 1 auto(默认这三个值) -
- 每个项目设置flex:1会使它们等分容器宽度(或高度)
4.示例一:flex布局实现flex容器中子元素的水平垂直居中
<style>
/* 我是弹性盒(flex)容器,简称容器 */
#container {
width: 800px;
height: 350px;
border: 1px solid red;
/* 设置弹性盒 */
display: flex;
/* 设置主轴方向:横轴 */
flex-direction: row;
/* 设置主轴对齐方式:居中对齐 */
justify-content: center;
/* 设置交叉轴对齐方式:居中对齐 */
align-items: center;
}
/* 我是容器中的项目,简称项目,也被称作灵活元素 */
#left, #middle, #right {
width: 200px;
height: 200px;
}
#left {
background: pink;
}
/* 为middle设置单独的交叉轴对齐方式 */
#middle {
background: yellow;
align-self: flex-end;
}
#right {
background: skyblue;
}
</style>
<body>
<div id="container">
<div id="left"></div
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
