flex 容器布局
作者:codingyt
- 2022-10-26 山东
本文字数:1944 字
阅读完需:约 6 分钟
1.第一步进行的是我们的 flex 布局的展示
1.确定主轴的属性
1.flex-direction
/* 这个是确定我们谁是主轴 */
flex-direction: row;默认为row
复制代码
代码演示
2.
flex-direction: column;
复制代码
3.设置外边距设置子盒子之间的外边距可以使得每个小盒子直接的距离不会显得很近
div span {
width: 150px;
margin-left: 10px;//这个决定我们的直接的距离 就是距离左侧的距离
height: 100px;
background-color: blueviolet;
}
复制代码
2.flex-wrap
这个是决定我们的
的元素是不是会进行换行
本身我们的元素要是不加上这个属性
复制代码
justify-content
1.我们要先确定我们的主轴之后我们才能进行确定我们的justify-content
我们的这个justify-content是默认从我们的左侧开始进行排列
这个属性就是分配空间的一个属性
复制代码
div {
display: flex;
width: 800px;
height: 300px;
background-color: #8A2BE2;
flex-direction: row;
/* justify-content是根据我们的主轴进行分配的 */
/* 这个默认就是 默认就是这个布局 */
/* justify-content: flex-start; */
/* 这个是和我们的刚刚那个row-reserve不一样 这个只是贴着右边对齐 */
/* justify-content: flex-end; */
/* justify-content: center; */
/* 平分剩余空间 就是把每一个空间平均分配 */
/* justify-content: space-around; */
/* 两边贴边 再分配剩余的空间 */
justify-content: space-between;
/* 但是我们要先确定好我们的主轴才行 */
}
复制代码
flex 布局中的子项
1.flex
section {
display: flex;
width: 60%;
height: 150px;
background-color: #00FFFF;
margin: 0 auto;
/* 上下不变 左右居中对齐 */
/* 这个是控制在侧轴方向的移动 */
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: #8A2BE2;
//这个写法就是单单处理我们的一个盒子里面的第一个子盒子
}
/* 这个是将剩余的空间全部分配给这个盒子 用flex表示所占的分数 */
section div:nth-child(2) {
/* 当这个给予一份的时候 */
flex: 1;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: #ff55ff;
}
复制代码
下面这个代码就是份数显示的功能
p span {
/* margin-left: 2px; */
/* flex为我们的盒子所占的份数 其实是 */
flex: 1;
background-color: #FFE4C4;
}
p span:nth-child(2) {
/* flex数值越大分配的大小就越大 */
flex: 3;
background-color: brown;
}
复制代码
flex 布局中的子属性
1.align-self
控制单一盒子的侧轴方向的移动(只是对一个盒子)
只移动一个盒子的位置
div {
display: flex;
width: 80%;
height: 300px;
background-color: #00FFFF;
/* 这个是让我们的侧轴进行移动 但是这个就是全部移动
但是我们不想全部进行移动 */
/* align-items: flex-end; */
/* 但是我们只是想移动一个的位置进行处理 那么就是说使用一个align-self
就是只让一个盒子进行移动 */
}
div span {
width: 150px;
height: 100px;
background-color: #ffaa7f;
margin-right: 5px;
}
/* 我们需要加上我们的顺序进行处理 实现真正的 */
/* 我们最好的使用方法就是使用我们的 box就是直接进行类的封装 */
.box2 {
background-color: #A52A2A;
order: -1;
}
div span:nth-child(3) {
align-self: flex-end;
}
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 6
版权声明: 本文为 InfoQ 作者【codingyt】的原创文章。
原文链接:【http://xie.infoq.cn/article/0be174fb98d47c029c14553d7】。文章转载请联系作者。
codingyt
关注
还未添加个人签名 2022-10-25 加入
还未添加个人简介
评论