flex布局

最新推荐文章于 2025-01-02 14:49:38 发布

猿媛相报何时了

最新推荐文章于 2025-01-02 14:49:38 发布

阅读量188

点赞数

文章标签： css3 flex css

本文链接：https://blog.youkuaiyun.com/qq_40652104/article/details/111706548

版权

本文介绍了Flex弹性布局，它能为盒状模型提供最大灵活性，可自适应页面布局。文中给出了元素水平垂直居中、左右布局、内容宽度等分等实例，还详细阐述了容器属性如flex - direction、flex - wrap等，以及项目属性如order、flex - grow等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。

实例

实现元素的水平垂直居中

使用css3的transform + position实现

<body>   
   <div class="ele">实现我的水平垂直居中</div>
</body>

<style>
.ele {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
</style>

使用position + margin实现(元素已知宽高）

<body>
   <div class="ele">实现我的水平垂直居中</div>
</body>

.ele {
       width: 100px;
       height: 100px;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
   }

或者

<body>
   <div class="ele">实现我的水平垂直居中</div>
</body>

.ele {
       width: 100px;
       height: 100px;
       position: absolute;
       top: 50%;
       left: 50%;
       margin-top: -50px;
       margin-left: -50px;
   }

flex实现

<div class="outer">
       <div class="ele">实现我的水平垂直居中</div>
</div>

.outer {
       display: flex;
       justify-content: center;
       align-items: center;
   }

左右布局，一侧定宽，一侧自适应撑满
比如实现这个搜索框，整个搜索框和搜索图标宽高固定，怎么让输入框填充满剩下的空间？

<div class="outer">
   <input type="text" class="left-input">
   <img src = "./search.png" class="right-icon">
</div>

<style>
    .outer{
        width: 300px;
        border: 1px solid #000;
        display: flex;
    }
    .right-icon{
        width: 32px;
        height: 32px;
    }
    .left-input{
        flex:1;
    }
    
</style>

现内容宽度等分–实现一个三栏等分布局

<div class="outer">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>
<style>
 .outer {
   width:100%;
   height: 100px;
   display: flex;
}
.one,.two,.three {
  flex: 1;
  border: 1px solid red;
}
</style>

父元素和两个子元素的都由内容撑开，怎么实现两个子元素的高等高

<div class="outer">
  <div class="one">
   <div>
     asdfasddfasdfasf  <br>
     asdfasddfasdfasf  <br>
     asdfasddfasdfasf  <br>
     asdfasddfasdfasf  <br>
   </div>
 </div>
 <div class="two">
   <div >
     dafsdf  <br>
     dafsdf  <br>
     dafsdf  <br>
   </div> 
</div>
<style>
.outer {
  width: 400px;
  background-color: antiquewhite;
  display: flex; //flex属性即可实现
}
</style>

容器属性

flex-direction：row | row-reverse | column | column-reverse ; 定义主轴的方向
flex-wrap: nowrap | wrap | wrap-reverse ; // 如果一条轴线排不下，如何换行
flex-flow: <flex-direction> | <flex-wrap>
justify-content: flex-start | flex-end | center | space-between | space-around;定义项目在主轴上的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around;属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
align-items：flex-start | flex-end | center | baseline | stretch; // 定义项目在交叉轴上的对齐方式

项目属性

order: ; // 排列顺序，数值越小，排列越靠前，默认为0
flex-grow: 0; 属性定义项目的放大倍数，默认0，如果存在放大空间也不放大；所暂剩余空间的比例
flex-shrink: 1; //该属性定义了项目的缩小比例，默认1，如果空间不足，该项将缩小；如果多项设置为1 ，且空间不住时，各项都将等比例缩小
flex-basis: width | height | auto; //定义了在分配多余空间之前，项目占据的主轴空间
flex: 0 1 auto;//默认； flex：1 ;//忽略原本宽度，等比分配
align-self：auto | flex-start | flex-end | center | baseline | stretch;//允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

注：flex: <flex-grow> | <flex-shrink> | <flex-basis>;
flex-grow 定义的是弹性盒子项的拉伸因子，默认值是0；
flex-shrink 定义的是弹性盒子项的收缩规则，默认值是1；
flex-basis 定义了flex元素在主轴方向上初始值的大小，默认值是 auto；