day17-弹性盒布局

84 阅读 0 评论 56 点赞

我是靠谱客的博主傲娇向日葵，最近开发中收集的这篇文章主要介绍day17-弹性盒布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!--

一:弹性盒的概念

1.容器:设置了弹性盒属性的父级盒子

2.项目:在容器里面的子级元素

3.作用:控制项目在容器里面的排列位置

二:弹性盒的设置

1.属性:display(显示)

2.属性值:flex(弹性的)

3.弹性盒的基本特点

- 元素设置了弹性盒属性,就会有主轴和侧轴的概念

- 弹性盒中默认的主轴方向是X轴,所有的项目都会沿着主轴排列(主侧轴是对应关系)

- 弹性盒中不考虑元素类型,所有的标签都可以直接添加宽高大小

- 居中方式:给子级元素设置 margin:auto 即可

三:关于弹性盒使用的注意点

1.盒模型、定位、浮动、位移这些属性能用吗? 暂时把浮动属性忘记

2.是否会脱离文档流呢? 不会

3.在弹性盒不需要清除浮动也不会出现高度塌陷的bug

-->

添加在容器上的属性

一:改变主轴的排列方向:默认的主轴是X轴

1.属性:flex-direction

2.属性值

- row 行、默认主轴是X轴,侧轴是Y轴

- column 列、默认主轴是Y轴,侧轴是X轴

二:设置主轴上的排列方式

1.属性:justify-content

2.属性值

- flex-start 在主轴的开始位置

- flex-end 在主轴的结束位置

- center 在主轴的中间位置

- space-between 两端对齐,其余空间自动分配

- space-around 项目的左右间距是自动分配的(相等的)

- space-evenly 表示所有的空间全部自动分配(相等的)

三:设置侧轴上的排列方式

1.属性:align-items

2.属性值:

- flex-start 在主轴的开始位置

- flex-end 在主轴的结束位置

- center 在主轴的中间位置

- baseline 基线对齐(默认情况下和flex-start效果一样)

- stretch 拉伸(没有设置高度的时候)

四:在pc端布局中当元素宽度过多的时候,最后的元素会往下掉(之前解决方法:min-width/百分比)

当子级元素的宽度大于父级元素宽度的时候默认是进行挤压的(不会掉下去)

1.属性:flex-wrap

2.属性值

- no-wrap 不换行

- wrap 换行

五:行与行之间的间距设置

1.属性:align-content

2.属性值

- flex-start 在主轴的开始位置【常用】

- flex-end 在主轴的结束位置

- center 在主轴的中间位置

- space-between 两端对齐,其余空间自动分配

- space-around 项目的左右间距是自动分配的(相等的)

- space-evenly 表示所有的空间全部自动分配(相等的)

-->

弹性盒中基线对齐的认识：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
section{
width: 700px;
height: 550px;
border: 1px solid #000;
margin: 100px auto;
display: flex;
/* flex-direction: column-reverse */
/* justify-content: space-evenly; */
align-items: baseline
}
/* span{ */
/* width: 100px; */
/* height: 100px; */
/* background: #000; */
/* color: #fff; */
/* text-align: center; */
/* line-height: 100px; */
/* font-size: 30px;
border-radius: 50%; */
/* } */
span:nth-child(1){
font-size: 20px;
}
span:nth-child(2){
font-size: 30px;
}
span:nth-child(3){
font-size: 40px;
}
span:nth-child(4){
font-size: 50px;
}
span:nth-child(5){
font-size: 60px;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</section>
</body>
</html>

<!--

添加在子级元素上的属性

一:控制项目的显示顺序

1.属性:order

2.属性值:数字,数字越大越往后显示

二:设置单个元素在侧轴上的对齐方式

1.属性:align-self

2.属性值

- flex-start/end/center

三:【重点】子级元素在父级元素中的主轴方向占比方式

1.属性:flex

2.属性值:数字,表示在父级中所占的比例