目录
2、justify-content:设置主轴上的子元素排列方式
4、align-content:设置侧轴上的子元素的排列方式(多行)
5、align-items:设置侧轴上的子元素排列方式(单行)
一、正常布局流
正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示
<p>I love my cat.</p>
<ul>
<li>Buy cat food</li>
<li>Exercise</li>
<li>Cheer up friend</li>
</ul>
<p>The end!</p>
出现在另一个元素下面的元素被描述为块元素,出现在另一个元素旁边被描述为内联元素
二、display属性
display
决定了元素在布局流中的外在表现,比如它是像段落、块级容器那样独占一行,还是像文字一样内联排布,或者干脆不显示。
常见取值如下:
1、display: block;
(块级元素):
独占一行:一个块级元素会在其前后自动生成换行(与其兄弟块分行),默认情况下它不会与其他元素并排;可设置宽高:能够设置 width
、height
、margin
、padding
等属性并正常生效;自动宽度:默认宽度会撑满父容器的可用空间(不设置 width
时)。
2、display: inline;
(内联元素):
跟文字一样在同一行内排布:不会独占一行,可以和相邻内联元素、文本混排;宽高不起作用:对内联元素设置 width
、height
通常无效,margin-top
、margin-bottom
也无明显影响;只受内容大小影响:它的尺寸由内部文本或子元素内容决定。
3. display: inline-block;
—— 既像内联又像块:
与文字并排:可在一行内与其他内联或 inline-block 元素并列;可设置宽高:跟块级元素一样,可以通过 width
, height
, margin
, padding
等属性来控制尺寸;常用场景:制作导航菜单的水平列表、图文混排中的小块元素、横向排列多个盒子但每个盒子大小可控。
<span style="display: inline-block; width: 100px; height: 50px; background: lightcoral;">
这是一个 inline-block
</span>
<span style="display: inline-block; width: 80px; height: 50px; background: violet;">
还能并排
</span>
它们会出现在同一行,但每个小盒子都可以设置自己的宽高,类似“块”的特性。
4. display: none;
—— 隐藏 :
不占据页面空间:元素被完全移除渲染树,好像在 HTML 中不存在一样;与 visibility: hidden;
的区别:visibility: hidden;
仍会占据原位置,只是不可见;display: none;
连占位都没有。常见用途:通过 JS 或 CSS 让某些内容条件性隐藏(如:下拉菜单收起时 display: none;
,展开时 display: block;
)。
5. 现代布局:display: flex;
& display: grid;(下面会详细解释)
随着 CSS3 的发展,Flexbox 和 Grid 成为当前布局的主流选择,它们的行为超出了简单的“块与内联”范畴。
6. 其他常见取值
-
display: table;
-
让元素表现得像一个表格容器,可与
display: table-row; table-cell;
搭配模拟表格布局。
-
-
display: inline-flex;
-
类似
flex
,但容器本身以内联方式渲染,可在一行中继续与文字或其它元素并排。
-
-
display: inline-grid;
-
同上原理,只是把容器作为网格布局,但容器在父级里仍是内联排布。
-
三、弹性布局(flex布局)
我们在生活当中也会经常接触到网页使用flex布局,例如:
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式,主要表现在:
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器
当我们父元素有多个盒子的时候,我们知道块级元素是不是都是自占一行,那我们有时候需要将他们按照行和列进行对齐的时候,且按照一定的距离进行对齐,我们虽然可以使用margin进行对齐,但是如果父盒子有100个子盒子呢?这种行为就太无效,因为我们可以利用display:flex将父盒子设成弹性布局,无论里面有多少子盒子,我们只需要在父盒子进行操作就可以将它们按照我们想要的方式进行对齐排列。
我们先来看看flex布局的结构
当开启一个Flex布局的时候,容器中的一个个元素::before
、::after
、文本、dom元素就是项目,这些项目是容器的子元素,他们之间是父子关系,子元素也可以开启自己独立的Flex布局,他不会继承父元素的flex属性。
1、布局原理
采用 Flex布局的元素,称为Flex容器(flex container),简称“容器"。它的所有子元素自动成为容
器成员,称为Flex项目(flexitem),简称“项目"。
注意:当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效
默认情况下主轴沿着行的方向分布,侧轴沿着列的方向分布。有一点需要注意,主轴和侧轴的方向并不是固定不变的而是要受到flex-direction
和writing-mode
或者direction
了解概念以后我来看flex布局有哪些属性帮助我们进行布局
2、常见父项属性
1、flex-direction
控制主轴的方向
在flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y 轴
默认主轴方向就是x轴方向,水平向右
默认侧轴方向就是y轴方向,水平向下
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为