flex容器
16lz
2021-07-06
flex容器
作业内容:实例演示flex容器与项目中常用的属性,并写出功能
flex-flow
主轴方向是否换行- 效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex项目在主轴上是如何排列的</title>
<style>
/* flex-flow */
:root {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.container {
/* 转为flex容器,这样就可以使得flex特征进行布局了 */
display: flex;
border: 1px dashed;
/* flex-direction:row; */
width:40rem;
background-color:wheat;
/* flex-wrap: wrap; */
/* flex-flow:主轴方向 是否换行; */
/* 有换行:多行容器 */
/* 多行容器中,每一行都有一根主轴 */
flex-flow:row wrap;
}
/* flex项目必须是flex容器的直直接子元素 */
.container > .item {
/* 项目默认可收缩但不会放大 */
padding: 1rem;
height: 10rem;
background-color: lightcyan;
border: 1px solid;
}
/* 1.任何一个可视元素,添加display:flex后都可转为flex弹性容器 */
/* 2.flex弹性容器内的直接子元素称之为flex项目,它是真正的布局目标对象 */
</style>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
</html>
- 效果图
- justify-content:
在主轴上的对齐方式
flex-start 左对齐
flex-end 右对齐
space-between 两端对齐
space-around 分散对齐
space-evenly 平均对齐- 效果图
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex项目在主轴上是如何对齐的</title>
<style>
:root {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.container {
display: flex;
border: 1px dashed;
height: 20rem;
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
/* 两端对齐 */
justify-content: space-between;
/* 分散对齐 */
justify-content:space-around;
/* 平均对齐 */
justify-content: space-evenly;
}
.container > .item {
padding: 1rem;
height: 10rem;
background-color: lightcyan;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</html>
- 效果图
- align-items
交叉对齐
stretch拉伸
flex-start顶端对齐
flex-end 底端对齐
center 居中对齐- 效果图
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex项目在主轴上是如何对齐的</title>
<style>
:root {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.container {
display: flex;
border: 1px dashed;
height: 20rem;
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
/* 两端对齐 */
justify-content: space-between;
/* 分散对齐 */
justify-content:space-around;
/* 平均对齐 */
justify-content: space-evenly;
/* 交叉轴对齐 */
/* 拉抻 */
align-items: stretch;
align-items:flex-start;
align-items: flex-end;
align-items:center;
}
.container > .item {
padding: 1rem;
/* height: 10rem; */
background-color: lightcyan;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</html>
- 效果图
更多相关文章
- C语言进阶(六)--自定义类型详解(结构体+枚举+联合)
- C语言之结构体内存的对齐
- flex 容器的 flex-flow, justify-content, align-items, align-c
- grid对齐方式与基础实战
- 第五课 实例演示flex容器中的四个属性的功能,参数,以及作用
- CSS中flex布局的属性及应用
- CSS:flex布局理解及实例演示flex容器中的四个属性的功能、参数、
- C语言实现乘法口诀表
- flex项目上的三个属性及移动商城首页的页眉和页脚的布局