flex学习
1.flex布局：三行三列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局:三行三列</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body *:not(.container) {
background-color: sandybrown;
}
:root {
/* rem */
font-size: 10px;
}
body {
font-size: 1.6rem;
}
header,footer{
height: 5rem;
}
body{
height: 100vh;
display:flex;
flex-flow: column nowrap;
}
.container{
margin:5px 0;
flex: 1;
display: flex;
justify-content: space-between;
}
.container > aside {
width: 20rem;
}
.container main{
flex: 1;
margin: 0 5px;
}
</style>
</head>
<body>
<header>页眉</header>
<div class="container">
<aside>左侧</aside>
<main>内容区</main>
<aside>右侧</aside>
</div>
<footer>页脚</footer>
</body>
</html>
2.flex容器与项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex容器与项目</title>
<style>
*{
/* margin: 0;
padding: 0; */
box-sizing: border-box;
}
:root {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.container {
border: 1px solid;
height: 20rem;
/* 转为flex容器，这样就可以使用flex特征进行布局了 */
display: flex;
}
/* flex项目必须是flex容器的直接子元素 */
.container > .item{
padding:1rem;
background-color: thistle;
border: 1px solid;
}
/* 1.任何一个可视元素,添加displau:flex后都可转为flex弹性容器 */
/* 2.flex弹性容器内的直接子元素称之为flex项目,它是真正的布局目标对象 */
</style>
</head>
<body>
<!-- <div class="container"> -->
<span class="container">
<a class="container">
<!-- .item {天空是橙色的$}*3 -->
<div class="item">天空是橙色的1</div>
<div class="item">天空是橙色的2</div>
<div class="item">天空是橙色的3</div>
<div class="item">天空是橙色的4</div>
<div class="item">天空是橙色的5</div>
<div class="item">天空是橙色的6</div>
<div class="item">天空是橙色的7</div>
<div class="item">天空是橙色的8</div>
</span>
</body>
</html>
3.flex项目在主轴上是如何排列的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex项目在主轴上是如何排列的</title>
<style>
*{
/* margin: 0;
padding: 0; */
box-sizing: border-box;
}
:root {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.container {
/* border: 1px solid; */
border: 1px dashed;
background-color: blueviolet;
/* height: 20rem; */
width: 40;
/* 转为flex容器，这样就可以使用flex特征进行布局了 */
display: flex;
/* 允许换行,转为多行容器 */
/* flex-wrap: wrap; */
/* 主轴方向 */
/* flex-dire`ction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-flow: 主轴方向 是否换行 */
/* flex-flow: row nowrap; 默认值 */
/* 有换行：多行容器 */
/* 多行容器中，每一行都是一根主轴 */
flex-flow: row wrap;
}
/* flex项目必须是flex容器的直接子元素 */
.container > .item{
/* 项目默认可收缩但不会放大 */
padding:10rem;
height: 10rem;
background-color: thistle;
border: 1px solid;
}
/* 1.任何一个可视元素,添加displau:flex后都可转为flex弹性容器 */
/* 2.flex弹性容器内的直接子元素称之为flex项目,它是真正的布局目标对象 */
</style>
</head>
<body>
<!-- <div class="container"> -->
<span class="container">
<a class="container">
<!-- .item {天空是橙色的$}*3 -->
<div class="item">天空是橙色的1</div>
<div class="item">天空是橙色的2</div>
<div class="item">天空是橙色的3</div>
<div class="item">天空是橙色的4</div>
<div class="item">天空是橙色的5</div>
<div class="item">天空是橙色的6</div>
<div class="item">天空是橙色的7</div>
<div class="item">天空是橙色的8</div>
</span>
</body>
</html>
4.flex项目在主轴上是如何对齐的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex项目在主轴上是如何对齐的</title>
<style>
*{
box-sizing: border-box;
}
:root {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
.container {
border: 1px dashed;
/* background-color: blueviolet; */
height: 20rem;
display: flex;
/* 主轴方向和是否换行取默认值 */
flex-flow: row nowrap;
/* 所有的项目在主轴上的对齐，有一个前提：主轴空间上必须存在剩余空间 */
/* 所谓对齐就是主轴上的剩余空间如何在项目之间进行分配 */
/* 默认：剩余空间位于所有项目的右边 */
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: thistle;
border: 1px solid;
}
</style>
</head>
<body>
<a class="container">
<div class="item">天空是橙色的1</div>
<div class="item">天空是橙色的2</div>
<div class="item">天空是橙色的3</div>
<div class="item">天空是橙色的4</div>
</span>
</body>
</html>
