flex弹性盒子

最新推荐文章于 2024-10-02 09:25:25 发布

山河月色

最新推荐文章于 2024-10-02 09:25:25 发布

阅读量149

点赞数 1

分类专栏： css 文章标签： flex css

本文链接：https://blog.csdn.net/m0_52412801/article/details/119009245

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了弹性盒子的基础属性，包括如何声明弹性盒子、切换主轴方向、主轴与交叉轴上的对齐方式。通过实例展示了不同属性设置下的效果，如`flex-direction`、`justify-content`和`align-items`。这些概念对于实现响应式和灵活的网页布局至关重要。文章总结了使用弹性盒子布局时需要考虑水平和垂直方向的配合，以达到理想的设计效果。

摘要由CSDN通过智能技术生成

弹性盒子的基础属性

1.声明弹性盒子

 声明弹性盒子 display:flex(块flex)/line-flex(行内块flex)

你想摆放那些盒子他的父元素就是弹性盒 display:flex 注意一点要给他的父元素加display:flex
2.切换主轴方向

 flex-direction:row/column/row-reverse/column-reverse
 	row(水平)
 	column(垂直)
 	row-reverse(还是水平方向但是起始端和末尾段颠倒了)
 	column-reverse(还是垂直方向但是起始端和末尾段颠倒了)

3.主轴方向上的对齐方式

justify-content:
        flex-start 起始端对齐
        flex-end 结尾端对齐
        center 居中对齐
        space-between 两端对齐 中间间距等分
        space-evenly 间距环绕等分
        space-around 两端间距是中间间距的一半

4交叉轴方向上的对齐

aligin-items:
        flex-start 交叉轴起始端对齐 顶对齐
        flex-end 交叉轴末尾端对齐 底对齐
        center 居中对齐 垂直居中
        baseline 以文本基线对齐为主
        stretch 延伸 占满的 适用于未给盒子高度时,子盒子会占满父盒子的高度

各个对齐方式如下图所示

<div class="box">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>

	   * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin: 40px auto;
            width: 1000px;
            height: 400px;
            border: 2px solid red;

            /* 声明弹性盒
            1·默认主轴方向在水平方向
            默认主轴上的排列方式是左对齐
           */
            display: flex;
            /* 2·切换主轴方向 */
            /* flex-direction: column; */
            justify-content: flex-start;
            /* justify-content: center; */
        }

        .col {
            width: 200px;
            height: 200px;
            line-height: 200px;
            font-size: 50px;
            text-align: center;
        }

        .col:nth-child(1) {
            background-color: yellow;
        }

        .col:nth-child(2) {
            background-color: green;
        }

        .col:nth-child(3) {
            background-color: aquamarine;
        }

当主轴方向是row时
当justify-content: flex-start时
起始端对齐
当justify-content: flex-end;时
结尾端对齐
当justify-content: center;时

当justify-content: space-between;时
两端对齐中间间距等分
当justify-content: space-evenly;时

当justify-content: space-around;时
两端间距是中间间距的一半
当主轴方向是column
当align-items: flex-start时
在这里插入图片描述
当align-items: flex-end时

当align-items: center时

当 flex-direction: row;justify-content: center;align-items: center时
垂直居中
总结
弹性盒子在进行布局时需要水平或垂直一起来进行来达到想要的效果