css3弹性盒子+小程序布局

最新推荐文章于 2024-08-21 12:08:59 发布

置顶 cyclv

最新推荐文章于 2024-08-21 12:08:59 发布

阅读量1.4k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/weixin_41487694/article/details/79614061

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

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

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

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>cyc.lv.com</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
    flex-direction: row;
}
.flex-item1 {
    background-color: cornflowerblue;
    width: 100px;
    height: 50px;
    margin: 10px;
}
.flex-item2 {
    background-color: skyblue;
    width: 100px;
    height: 50px;
    margin: 10px;
}
.flex-item3 {
    background-color: yellow;
    width: 100px;
    height: 50px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item1">flex item 1</div>
  <div class="flex-item2">flex item 2</div>
  <div class="flex-item3">flex item 3</div>  
</div>
</body>
</html>

1.flex-direction(方向)

子元素在父元素中的排列方式 row：横向排列 column：纵向排列 row -reverse(反向) 同理 column-reverse

2. justify-content

子元素在父元素中的对齐方式

flex-start（开头） | flex-end（结尾 ）|center（居中） | space-between（两边对齐） | space-around（平均分布在该行上）

3.align-items

align-items 设置或检索弹性盒子元素在纵轴方向上的对齐方式。跟(line-height)功能一直

align-items: flex-start（纵轴起始位置） | flex-end （纵轴起始位置）| center（居中放置） | baseline | stretch

4.flex-wrap 子元素换行方式。

flex-wrap: nowrap（单行）|wrap（多行）|wrap-reverse（反转）

5.align-content 多行的时候，每行在盒子呢的纵向排序方法

用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

我的案例

        .flex{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .flext{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }