浅谈html的布局

最新推荐文章于 2022-01-12 22:14:11 发布

衣服架子

最新推荐文章于 2022-01-12 22:14:11 发布

阅读量515

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/huijiaaa1/article/details/104266366

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浅谈html的布局

我也是一个前端渣渣，只会玩简单的一些html标签。每次看到别人网页构造的如此精妙，我都好羡慕，什么时候我也有这个能力。这不，又来强化html的布局方案。

大致来说，css有三个阶段。

其中:

第一个阶段就是我们基于盒状模型，依赖 display属性 + position属性 + float属性来定位一些容器的布局，想写一个自适应的界面非常的麻烦。
第二个阶段便是进阶到 flex布局，
第三个阶段进阶到 grid布局，俗称栅格布局。

一、flex 布局

1.1 flex简介

采用Flex布局的元素，称为Flex容器，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（可以理解为Y轴）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴（可以理解为Y轴）的开始位置叫做cross start，结束位置叫做cross end。

1.2 flex属性介绍

1.2.1 flex-direction：

可以设置主轴方向，默认水平方向为主轴。它的取值如下：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

1.2.2 flex-wrap:

默认情况下，我们使用flex布局，元素是不会换行的。他会自动调整每个元素的宽度用以容纳子元素。

nowrap（默认值）: 不换行
wrap：第一行在上方
wrap-reverse：第一行在下方。通过reverse也不难看出。就是翻转的意思。

1.2.3 flex-flow：

flex 属性是flex-direction属性和flex-wrap属性的简写形式，其默认值为row nowrap即可以把两个属性放在一起用。flex-flow: row wrap

即等价于：

flex-direction: row;
flex-wrap: wrap;

1.2.4 justify-content：

justify-content属性定义了项目在主轴上的对齐方式，注意是主轴！！！

其取值如下：

flex-start：左对齐
flex-end：右对齐
center：居中
space-between：两端贴边，中间间隔相同。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

1.2.5 align-items：（单行时才有效）

align-items属性定义项目在侧轴（可以理解成Y轴）如何对齐。注意是Y轴！！！

其取值如下：

flex-start：Y轴上方水平线对齐
flex-end：Y轴底水平线对齐
center：项目的上下边距离容器边界距离相等
baseline：项目的第一行文字的基线对齐。
stretch：拉伸。如果项目未设置高度或设为auto，将占满整个容器的高度。

1.2.6 align-content：(多行)

设置侧轴上的子元素的排列方式。注意和上个属性的区别。如果是单行，那么该属性将失效

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

1.3 项目的属性

order：项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

栅格布局

首先，谈谈我理解的bootstrap栅格布局。所谓的栅格布局，就是可以随着设备或视口大小的增加而适当地扩展到 12 列。

写一段示例代码：

<div class="container">
 	<div class="row">
      <div class="col-md-8">.col-md-1</div>
      <div class="col-md-4">.col-md-1</div>
    </div>
</div>
</div>