1.flex布局父项常见属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VgsJiC2G-1685879909207)(C:\Users\HCKB\Pictures\Camera Roll\微信图片_20230601195746.jpg)]
(1)flex-direction设置主轴方向:
默认主轴就是x轴,水平向右
侧轴是y轴,水平向下
主轴和侧轴是可以变化的
div {
/* 给父级添加flex属性 */
display: flex;
width: 80%;
height: 300px;
background-color: aqua;
/* 默认的主轴是x轴 y轴是侧轴*/
/* 元素是跟着主轴排列的 */
flex-direction: row;
/* 翻转 主轴从右向左 */
flex-direction: row-reverse;
/* 从上到下 主轴为y轴 那么x轴是侧轴 */
flex-direction: column;
/* 从下到上 */
flex-direction: column-reverse;
}
(2)justify-content 设置主轴上的子元素排列方式
使用前先确定好主轴是哪个
div {
display: flex;
width: 80%;
height: 300px;
background-color: aqua;
/* 默认主轴是x轴 */
flex-direction: row;
/* justify-content 设置主轴上的子元素排列方式 */
/* 默认从头部开始 */
justify-content: flex-start;
/* 从尾部开始 */
justify-content: flex-end;
/* 在主轴居中对齐 */
justify-content: center;
/* 平分剩余空间 */
justify-content: space-around;
/* 先两边贴边 再平分剩余空间 */
justify-content: space-between;
}
(3)flex-wrap子元素是否换行
默认不换行,如果装不开,会缩小子元素的宽度,放到父元素里面
div {
display: flex;
width: 600px;
height: 300px;
background-color: aqua;
/* 默认不换行 */
flex-wrap: nowrap;
/* 换行 */
flex-wrap: wrap;
}
(4)align-items设置侧轴子元素排列(单行)
div {
display: flex;
width: 80%;
height: 300px;
background-color: aqua;
flex-direction: row;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: center;
/* 拉伸 但子盒子不要给高度 */
align-items: stretch;
/* 侧轴从上到下 */
align-items: flex-start;
/* 侧轴从下到上 */
align-items: flex-end;
}
(5)align-content设置侧轴上的子元素排列方式(多行)
只能用于子项出现换行的情况,再单行下是没有效果的
div {
display: flex;
width: 700px;
height: 700px;
background-color: aqua;
/* 换行 */
flex-wrap: wrap;
/* 因为有了换行,此时我们侧轴上控制子元素的对齐方式用 align-content*/
/* 默认值 在侧轴的头部开始排列 */
align-content: flex-start;
/* 在侧轴尾部开始排列 */
align-content: flex-end;
/* 在侧轴中间显示 */
align-content: center;
/* 子项在侧轴平分剩余空间 */
align-content: space-around;
/* 子项在侧轴先分布在两头,再平分剩余空间 */
align-content: space-between;
/* 拉伸 不要给子盒子高度 设置子项元素高度平分父元素高度 */
align-content: stretch
}
(6)flex-flow 是flex-direction和flex-wrap的复合属性
flex-flow: column wrap;
2.flex布局子项常见属性
(1)flex属性
定义子项目分配剩余空间,用flex表示占多少份
.items {
flex: <number>; /* default 0 */
}
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: blue;
margin: 0 auto;
}
/* 左右盒子固定 中间盒子自适应 */
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: darkviolet;
}
section div:nth-child(2) {
flex: 1;
background-color: chartreuse;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: rgb(227, 99, 14);
}
p {
display: flex;
width: 60%;
height: 150px;
background-color: blue;
margin: 0 auto;
}
/* 三个盒子都是自适应 */
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
(2)align-self 控制子项自己在侧轴上的排列方法
可以允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: blue;
}
div span {
width: 150px;
height: 100px;
background-color: rgb(255, 0, 0);
margin-right: 5px;
}
div span:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
(3)order属性定义项目的排列顺序
数值越小,排列越靠前,默认值为0
注意:和z-index不一样
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: blue;
}
div span {
width: 150px;
height: 100px;
background-color: rgb(255, 0, 0);
margin-right: 5px;
}
div span:nth-child(2) {
/* 默认是0 -1比0小 */
order: -1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
right: 5px;
}
div span:nth-child(2) {
/* 默认是0 -1比0小 */
order: -1;
}
1
2
3
~~~