最全的flex 布局
2020-05-05 本文已影响0人
lessonSam
父元素的属性
flex之content 父元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex; /* 默认沿着主轴方向 从main-start 到main-end 方向排布 默认值是row*/
/* flex-direction 决定主轴的方向*/
/* flex-direction:row ;*/ /* 默认值 */
/* flex-direction: row-reverse; */ /* 在row 的基础上反转 */
/* flex-direction: column; */ /* 主轴按列方向排布 */
/* flex-direction: column-reverse; */ /* 主轴按列的放向反转 */
/* ****************************************************************************** */
/* justify-content : auto; */ /* 决定flex-items 的在主轴的对齐方向 */
/* flex-start flex-end center 决定在主轴方向上的flex-items 的 对齐方式*/
/* space-between 两边顶头对齐 */
/* justify-content: space-between; */
/* justify-content: space-evenly; 平均均分 */
/* justify-content: space-around; items 左右均等 */
/* ****************************************************************************** */
/* align-items 决定在交叉轴的对齐方式 */
/* flex-end 交叉轴的底部 flex-start 顶部 center 在交叉轴中间 居中*/
/* normal 和stretch 当items 没有高度时表示拉伸 */
/* baseline 当 items 的高度不一样的时候 以基线对齐 */
text-align: center;
/* 注意 当 item的总宽度超过父盒子会收缩 这时候需要用 flex-wrap 就是所有的items 都在同一行显示*/
/* wrap 表示超出换行显示 默认换行会平分父盒子高度 */
/* flex-wrap: wrap; */
/* ************************************************************************* */
/* flex-flow 是flex-wrap 和flex-direction的合并 顺序随意 */
/* flex-flow: column wrap; */
/* ****************************************************************************** */
/* align-content 决定多行的flex-items 在交叉轴的对齐方式 默认多行文本等分父元素的高度 */
/* flex-start flex-end space-between space-around space-evenly center*/
flex-wrap: wrap;
align-content: space-around;
background-color: red;
width: 700px;
height: 700px;
color: #fff;
}
.item {
width: 100px;
height: 100px;
}
.item1 {
background-color: yellow;
}
.item2 {
background-color: #0f0;
}
.item3 {
background-color: blue;
}
.item4 {
background-color: pink;
}
.item5 {
background-color: #00ff00;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>
子元素的属性
flex之items 的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
background-color: red;
width: 700px;
height: 700px;
color: #fff;
}
/* 关于flex-items */
/* ******************************************************************** */
/* 1. order 可以为正 负 0 值越小越排在前面 */
/* 2. align-self 会覆盖掉align-items 的对齐方式 */
/* 3. flex-glow 按份数均分父元素的剩余空间*/
/* 4. flex-shrink 按超出父元素的宽度值 按份收缩 只有子元素的宽度和超过父元素才会生效 最小不会小于 min-width */
/* 5. flex-bsics 设置子元素的宽度 优先级：min-width flex-bsics width 内容 注意：最大子元素的和不能超过父元素*/
/* 6. 简写属性： flex-grow flex-shrink flex-bsics,属性可以指定一个，两个，三个 */
/* 单值语法 */
/* a,如果是一个无单位的数，会被当做 flex-glow 的值 */
/* b,如果是一个有效的宽度值100px 会被当做flex-bsics 处理 */
/* c,关键字 none auto inital */
/* 双值语法 第一个值必须是一个无单位值 作为flex-grow 处理 */
/* 第二个值必须为一下 */
/* a,无单位值 当做 flex-shrink 处理 */
/* b,有效的宽度值 当做 flex-bsics 处理 */
/* 三值语法 */
/* a,第一个值无单位当做flex-grow 处理 */
/* b,第二个值无单位 当做flex-shrink */
/* c,第三个值有单位 当做 flex-basis 处理 */
.item {
width: 100px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 100px;
/* flex-grow: 1; */
flex-basis: 120px;
flex: ;
}
.item1 {
background-color: yellow;
/* order: 4; */
/* flex-grow: 1; */
}
.item2 {
background-color: rgb(0, 255, 234);
/* order: 6; */
}
.item3 {
background-color: blue;
/* order: 8; */
/* flex-grow: 3; */
}
.item4 {
background-color: pink;
/* order: -2; */
}
.item5 {
background-color: #00ff00;
/* order: 3; */
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>
