flex 常用布局

前端小芬芬

已于 2022-01-29 15:33:16 修改

阅读量3.2k

点赞数

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

于 2021-12-01 17:16:44 首次发布

本文链接：https://blog.csdn.net/yf18040578780/article/details/121659329

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了使用Flex布局实现水平垂直居中和左右两侧固定宽度、右侧自适应的布局方法。通过示例代码，展示了如何利用`justify-content`和`align-items`属性进行水平和垂直对齐，并探讨了`flex-wrap`属性在换行布局中的应用。同时，总结了Flex布局的关键属性，如`flex-direction`、`flex`等，帮助开发者更好地理解和运用Flex布局。

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

1. 水平垂直居中布局

<div class="main">
    <div class="content">
    </div>
</div>

.main{
    width: 400px;
    height: 400px;
    border: 1px solid #CCC;
    display: flex; /*父元素设置flex属性*/
    justify-content: center; /*水平主轴居中*/
    align-items: center; /*垂直交叉轴居中*/
}
.content{
    width: 100px;
    height: 50px;
    background: pink;
}

2. 左边固定，右边自适应

<div class="main">
    <div class="content1">左对齐/右对齐/居中对齐/平分空间/两端对齐</div>
    <div class="content2"> 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐</div>
</div>

自适应不换行

  .main {
       display: flex;
   }
   .main .content1 {
       flex: 0 0 300px;
       margin-right: 30px;
   }

自适应换行

  .main {
       display: flex;
       flex-wrap: wrap;
   }
   .main .content1 {
       flex: 0 0 300px;
       margin-right: 30px;
   }
   .main .content2 {
       flex: 1 0 0;
   }

flex 布局总结

开始flex布局

display:flex;

横向

justify-content:flex-start/flex-end/center/space-evenly/space-between;

左对齐/右对齐/居中对齐/平分空间/两端对齐

space-around 跟space-evenly类似，但是左右两边的留白为平分空间的 1/2.

竖向

align-item:flex-start/flex-end/center;

靠上左对齐/靠下对齐/居中对齐

改变轴模式

flex-direction:column;

调整块的宽度

flex:1; flex:2;flex:1;