CSS3弹性盒子

Lh_13%

已于 2022-09-07 20:45:53 修改

阅读量3.7k

点赞数 2

分类专栏：前端文章标签： 1024程序员节 html 前端 css3

于 2021-11-28 15:48:15 首次发布

本文链接：https://blog.csdn.net/LongHongYu908/article/details/121592192

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.display:flex; --------- 弹性盒子

1.display:flex; --------- 弹性盒子

主要的属性：

flex-direction: 弹性盒子中子元素的排列方式

flex-wrap: 设置子元素超过父元素后是否自动换行

flex-flow:flex-direction 和 flex-wrap 的简写

align-items ：设置弹性盒子在侧轴（纵轴）上的对齐方式

align-content: 对 flex-wrap 的一个修改，和 align-items 相似，但不是设置对齐方式

justify-content: 设置弹性盒子在横轴（主轴）上的对齐方式

2.flex-direction

取值：row------------------------默认值，作为一行，水平地显示弹性项目

row-reverse-------------等同row，但方向与其相反

column-------------------作为列，垂直地显示弹性项目

column-reverse--------等同column，但方向与其相反

<!DOCTYPE html>
 <html lang="en">
 <head><meta charset="UTF-8">
 <title>弹性盒子</title>
 <style type="text/css">
 .flex-container{ width: 400px; height: 250px; background-color: lightgrey; display: flex; flex-direction:column-reverse; }
.flex-item{ width: 100px; height: 100px; background-color: red; margin: 10px; }
 </style>
 </head>
 <body>
<div class="flex-container"> <div class="flex-item">弹性盒子1</div>
<div class="flex-item">弹性盒子2</div>
<div class="flex-item">弹性盒子3</div>
 </div>
 </body>
 </html>

3.flex-wrap

取值：nowrap-----------默认值，规定弹性项目不会换行

wrap---------------规定弹性项目会在需要时换行

wrap-reverse-----规定弹性项目会在需要时换行，但与wrap方向相反

<!DOCTYPE html>
 <html lang="en">
 <head><meta charset="UTF-8">
 <title>弹性盒子</title>
 <style type="text/css">
 .flex-container{ width: 400px; height: 250px; background-color: lightgrey; display: flex; flex-wrap:wrap-reverse;}
.flex-item{ width: 100px; height: 100px; background-color: red; margin: 10px; }
 </style>
 </head>
 <body>
<div class="flex-container">
 <div class="flex-item">弹性盒子1</div>
 <div class="flex-item">弹性盒子2</div>
 <div class="flex-item">弹性盒子3</div>
 <div class="flex-item">弹性盒子4</div>
 <div class="flex-item">弹性盒子5</div>
 <div class="flex-item">弹性盒子6</div>
 <div class="flex-item">弹性盒子7</div>
 <div class="flex-item">弹性盒子8</div>
 <div class="flex-item">弹性盒子9</div>
 </div>
 </body>
 </html>

4.flex-flow

<!DOCTYPE html>
 <html lang="en">
 <head><meta charset="UTF-8">
 <title>弹性盒子</title>
 <style type="text/css">
 .flex-container{ width: 400px; height: 250px; background-color: lightgrey; display: flex;  flex-flow:row-reverse wrap; }
.flex-item{ width: 100px; height: 100px; background-color: red; margin: 10px; }
 </style>
 </head>
 <body>
<div class="flex-container">
 <div class="flex-item">弹性盒子1</div>
 <div class="flex-item">弹性盒子2</div>
 <div class="flex-item">弹性盒子3</div>
 <div class="flex-item">弹性盒子4</div>
 <div class="flex-item">弹性盒子5</div>
 <div class="flex-item">弹性盒子6</div>
 <div class="flex-item">弹性盒子7</div>
 <div class="flex-item">弹性盒子8</div>
 <div class="flex-item">弹性盒子9</div>
 </div>
 </body>
 </html>

5.align-items

6.align-content

7.justify-content

8.扩展

order------ 可以改变子元素的顺序

flex - grow : 规定在相同的容器中，项目相对于其余弹性项目的增长量

flex-shrink : 固定在相同的容器中，项目相对于其余弹性项目的收缩量

flex-basis : 规定弹性项目的初始长度

flex:flex - grow 、 flex-shrink 、 flex-basis

align-self ：指定弹性容器内所选项目的对齐方式

Lh_13%

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3弹性盒子

目录1.display:flex; --------- 弹性盒子2.flex-direction3.flex-wrap4.flex-flow5.align-items6.align-content7.justify-content8.扩展1.display:flex; --------- 弹性盒子主要的属性：flex-direction:弹性盒子中子元素的排列方式 flex-wrap:设置子元素超过父元素后是否自动换行 flex-flow...
复制链接

扫一扫

专栏目录