弹性布局的属性及使用

最新推荐文章于 2024-04-21 07:10:13 发布

五纳子

最新推荐文章于 2024-04-21 07:10:13 发布

阅读量2.2k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_67832505/article/details/127835952

版权

　在平时的我们常用的布局类型有以下几种：

　　1.浮动+定位

　　2.自适应（百分比）

　　3.响应式布局

　　4.弹性布局（Flex布局）

　　优点：兼容性支持所有浏览器(Webkit内核的浏览器,要加上-webkit-)，可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局。

　　缺点：因为弹性布局可调节，所以有巨大的可能性，需要花很多的时间进行调整；有些弹性设计要为IE6单独设计样式。

　　注意：当我们使用了弹性布局，那么在CSS里的float、clear和vertical-align就会失效。

1.flex-direction属性

　　flex-direction决定了容器的方向。

　　四个值分别为：row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。

2.flex-wrap属性

　　默认情况下的布局一般在同一行，当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。

　　四个值分别为：nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。

3.flex-flow属性

　　flex-flow属性是以上两种属性的简写形式，默认值是row nowrap。

4.justify-content属性

　　justify-content属性定义了在容器方向上的对齐方式。

　　flex-start(默认值)：向左对齐。

　　flex-end：向右对齐。

　　center：居中对齐。

　　space-between：两端对齐，每一个子元素等距离间隔，子元素与容器边框无间隔。

　　space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

5.align-items属性

　　align-items属性定义在垂直容器方向上的对齐方式。

　　flex-start：垂直方向的起点对齐。

　　flex-end：垂直方向的终点对齐。

　　center：垂直方向的中点对齐。

　　baseline: 与第一个子元素中文字的基线对齐。

　　stretch(默认值)：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度。

6.align-content属性

　　align-content属性定义了子元素两种方向上的对齐方式。

　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

　　下面就是具有弹性布局容器中子元素的属性

1.order属性

　　order属性定义了子元素的排列顺序，数值小的在前。

2.flex-grow属性

　　flex-grow属性定义了子元素的放大比例，默认值为0。

　　当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。

3.flex-shrink属性

　　flex-shrink属性定义了子元素的缩小比例，默认值为1。

　　给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。

4.flex-basis属性

　　该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

5.flex属性

　　该属性为flex-grow, flex-shrink 和 flex-basis的简写。

6.align-self属性

　　该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。

　　auto：默认值，表示默认继承父级的align-items属性。

　　flex-start：垂直方向的起点对齐。

　　flex-end：垂直方向的终点对齐。

　　center：垂直方向的中点对齐。

　　baseline: 与第一个子元素中文字的基线对齐。

　　stretch(默认值)：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度。

部分实列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

五纳子

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
弹性布局的属性及使用

给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。
复制链接

扫一扫