html中弹性盒子的使用

最新推荐文章于 2024-07-25 11:52:08 发布

P3323197861

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量106

点赞数 1

文章标签： html css css3

本文链接：https://blog.csdn.net/P3323197861/article/details/131737838

版权

<!DOCTYPE html>

<head>

样式

<style>

.wrap {

width: 400px;

height: 200px;

background-color: pink;

/* 设置弹性容器 */

display: flex;

/* 设置弹性元素排列方向 */

/* flex-direction: column-reverse; */

/* flex-direction: row-reverse; */

/* 设置主轴空白空间的分布 */

justify-content: center;

/* justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly; */

align-items: center;

align-items: flex-end;

/*错误的属性值

align-items: space-between; */

flex-wrap: wrap-reverse;

align-content: center;

align-content: space-around;

}

.wrap>div {

height: 30px;

width: 100px;

border: 1px solid #00f;

}

.content {

/* width: 300px; */

width: 500px;

height: 200px;

background-color: aqua;

margin: 50px auto;

display: flex;

}

.content>div {

/* width: 80px; */

width: 150px;

height: 80px;

border: 2px solid #f00;

}

.content>.item2 {

flex-grow: 1;

/* width: 40px; */

flex-shrink: 2;

order: 2;

}

.content>.item1 {

order: 3;

flex-basis: 100px;

flex-grow: 1;

}

</style>

</head>

内容

<body>

<!--

弹性容器：元素设置display: flex;

弹性元素：弹性容器的子元素

主轴：弹性元素的排列方向

辅轴：垂直于主轴

注意：一个元素既可以是弹性容器，也可以是弹性元素

弹性盒子是代替浮动

-->

<!-- 弹性容器里面设置

1.设置弹性元素的在弹性容器排列方向：

flex-direction

取值：column 垂直方向自上向下

column-reverse 自下向上

row 水平方向自左向右默认值

row-reverse 自右向左

2.设置主轴空白空间的分布：

justify-content

取值：

center：是弹性元素在主轴居中显示

flex-start：是弹性元素在主轴开始处排列

flex-end：是弹性元素在主轴结束处排列

space-between：是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离

space-around：是空白空间平均分布在弹性元素二侧，弹性元素与弹性容器之间有距离

space-evenly：是空白空间平均分布在弹性元素一侧，弹性元素与弹性容器之间有距离

3.设置弹性元素在辅轴的排列方式辅轴单行或单列

align-items

取值：

center 辅轴居中

flex-end 辅轴结束

flex-start 辅轴开始

4.设置弹性元素是否转行

flex-wrap

取值：

nowrap 默认值不转行

wrap 转行

wrap-reverse 反向转行

5.设置辅轴空白空间的分布：

align-content

取值：

center：是弹性元素在辅轴居中显示

flex-start：是弹性元素在辅轴开始处排列

flex-end：是弹性元素在辅轴结束处排列

space-between：是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离

space-around：是空白空间平均分布在弹性元素二侧，弹性元素与弹性容器之间有距离

space-evenly：是空白空间平均分布在弹性元素一侧，弹性元素与弹性容器之间有距离

-->

<!-- 弹性元素

1.设置弹性元素扩大系数，当弹性容器的主轴宽度>弹性元素时，

注意：弹性元素实际占用空间与系数和基础长度有关

flex-grow：默认值0

2.设置弹性元素缩小系数，当弹性容器的主轴宽度<弹性元素时，

注意：弹性元素实际占用空间与系数和基础长度有关

flex-shrink：默认值0

3.设置弹性元素的顺序

order 值越大，排在后面

注意：设置order属性的弹性元素在没有设置order属性大弹性元素后面排列

4，

-->

<div class="div1">lorem1</div>

<div class="div2">lorem2</div>

<div class="div3">lorem3</div>

<div class="div1">lorem4</div>

<div class="div2">lorem5</div>

<div class="div3">lorem6</div>

<div class="div1">lorem7</div>

<div class="div2">lorem8</div>

<div class="div3">lorem9</div>

</div>

</div>

</body>

</html>

P3323197861

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中弹性盒子的使用

space-between：是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离。space-between：是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离。space-around：是空白空间平均分布在弹性元素二侧，弹性元素与弹性容器之间有距离。space-evenly：是空白空间平均分布在弹性元素一侧，弹性元素与弹性容器之间有距离。space-evenly：是空白空间平均分布在弹性元素一侧，弹性元素与弹性容器之间有距离。注意：一个元素既可以是弹性容器，也可以是弹性元素。
复制链接

扫一扫