flex_contents_grid布局方式

最新推荐文章于 2024-10-04 22:03:04 发布

ddbbi

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量68

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_51194808/article/details/130562005

版权

flex/contents/grid

display:flex

justify主轴
align侧轴
content所有
items每一个自己对应的框

父元素属性

flex-direction（主轴方向）
- row:从左到右（默认）
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
justify-content（主轴子元素排列方式）
- 需要提前设置好块的大小
- flex-start:
- flex-end:
- center:
- space-around:平分剩余空间，具有相同margin-left,margin-right
- space-between：先两边贴边再平分
flex-wrap是否换行
- nowrap:自动适配子元素的宽度高度等
- wrap
align-items（侧轴上子元素排列方式）针对单行
- flex-start:
- flex-end:
- center:
- stretch:拉伸使得与父元素高度相同，子不能给高度
align-content（针对多行,针对侧轴）
- flex-start:
- flex-end:
- center:
- space-around:平分剩余空间，具有相同margin-left,margin-right
- space-between：先两边贴边再平分
- stretch:拉伸
- flex-flow（同时包括flex-direction和flex-wrap）

子元素属性

flex:对剩余空间分配,默认为0
align-self:只针对这一个子盒子操作，可使用align-items中的属性
order:数值越小越靠前

display:contents

<!DOCTYPE html>
<html>
<head>
    <style>
        .item {
            display: contents;
            color: red;
            border: 2px solid blue;
            background-color: #ffffff;
            padding: 20px;
            margin: 20px;
        }
        .item::before {
            content: 'before';
            color: blue;
        }
        .item::after {
            content: 'after';
            color: white;
        }
    </style>

</head>
<body style="background-color: black;">
    <div class="item">
        <span>demo</span>
    </div>
</body>
</html>

设置了display:contents的元素的元素没有边框，所以元素的背景、padding、margin值都不会显示，但是可继承的属性会被子元素继承（例如color）

display:grid

父亲属性

grid-template-columns:1fr 2fr 1fr;//列的占比，也可用px表示
同样，有行的占比
间距
- 列：column-gap:22px;
- 行：row-gap:22px;
- 列和行：gap:22px;
对齐
- 垂直方向：align-items
- 水平方向：justify-items
- 对整体进行对齐：align-content/justify-content
grid-template-areas：对划分出的不同区域进行命名，而后可分配给子元素

.father{
grid-template-areas:
“header header header”
“sidebar content content”
“footer footer footer”
}
.son1{
grid-area:header;
}
.
.
.