CSS弹性盒子布局

最新推荐文章于 2024-06-14 09:42:20 发布

m0_37647258

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量192

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_37647258/article/details/104208320

版权

CSS弹性盒子布局

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
    <style>
        .father{
            display: flex;
            width: 400px;
            background-color: lightskyblue;
        }
        .item{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="father" >
        <div class="item" style="background:lightpink;">1</div>
        <div class="item" style="background:lightcoral;">2</div>
        <div class="item" style="background:lightgreen;">3</div>
    </div> 
</body>
</html>

方法：

给父级元素设置样式，例如项目中经常用到的：

.father{
  display: flex;
  /*
  just-cotent: flex-start; //默认值
  flex-wrap: nowrap;//默认值
  */
  justify-content: space-around;//中间和两边间距相同
  flex-wrap: wrap;//必要位置换行
}

改变样式：

可以利用just-content横向布局，flex-direction纵向排列。
align-items、align-content可以改变该弹性盒子在容器的位置。
flex-wrop决定必要是是否换行，和换行方向。

just-content：

flex-start //横向连续排列
flex-end //从尾部开始横向连续排列
center //中间横向连续排列
space-between //中间间隔相同
space-around //中间两边间隔都相同
initial //继承父级

flex-direction:

row //横向排列
row-reverse //相反顺序横向排列
column //纵向排列
column-reverse //相反顺序纵向排列

align-items:

strech //拉伸适应容器
center //容器中心
flex-start //容器开头
flex-end //容器末尾
baseline //容器基线

flex-wrop:

nowrap //默认值
wrap //必要位置换行
wrap-reverse //相反顺序换行

align-content:center对单行无效，而align-items:center对单行还是多行都有效果，align-items更好。

补充：
flex-flow:是flex-direction和flex-wrop的简写。默认值为row nowrap。

m0_37647258

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS弹性盒子布局

CSS弹性盒子布局案例：方法：改变样式：案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性盒子</title> <style> .father{ d...
复制链接

扫一扫