flex属性

本文详细介绍了Flex布局中的容器属性,包括主轴方向flex-direction、换行方式flex-wrap、简化写法flex-flow、主轴对齐justify-content及交叉轴对齐align-items,并通过实例展示了不同属性值的效果。

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

flex布局
display: flex 容器有六种属性
一、flex-direction  主轴方向 row水平左 row-reverse水平右 column垂直上 columen-reverse垂直下(4个属性值)
  • flex-direction: row 默认主轴水平方向,左侧为起点
     
  • flex-direction:row-reverse 默认主轴水平方向,右侧为起点
     
  • flex-direction:column 主轴为垂直方向,起点在上
    
  • flex-direction:column-reverse 主轴为垂直方向,起点在下
    

二、flex-wrap 一条轴线挤不开,如何换行  nowrap默认不换,wrap正换, wrap-reverse倒换 3个属性  
<span>wrap</span>
<div class="box">
    <div class="item red">1</div>
    <div class="item green">2</div>
    <div class="item aqua">3</div>
    <div class="item yellow">4</div>
    <div class="item gray">5</div>
    <div class="item pink">6</div>
    <div class="item blue">7</div>
    <div class="item orange">8</div>
    <div class="item Fuchsia">9</div>
</div>


<style>------------------css样色,其他颜色自定义
  body {
        background-color: #E6E6FA;
    }
.box {
    width: 300px;
    display: flex;
    flex-wrap: {{wrap}};
    }
.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
</style>  
  • flex-wrap: nowrap 默认 不换行 里面的盒子自适应
   
  • flex-wrap:wrap 换行,按正序排列
  
  • flex-wrap:wrap-reverse 换行,倒序排列
  
三、flex-flow  是flex-direction 和 flex-wrap的简写形式。 默认是row nowrap 解释为 主轴为水平方向,左侧为起点,不换行。
  
四、justify-content  主轴上的对齐方式  (5个属性)
  • justify-content: flex-start 左对齐
  • justify-content: flex-end 右对齐
  • justify-content: center; 居中
  • justify-content: space-between 两端对齐中间等距
  • justify-content: space-around 两侧距离是每项间距的一半
五:align-item 交叉轴上的对齐 5个属性 假设交叉轴从上到下
flex-start | flex-end | center | baseline | stretch
.box {
    width: 300px;
    border:1px solid black;
    display: flex;
    flex-direction: column;
    align-items:flex-start;
}


  • align-item: flex-start 交叉轴的起点 
  • align-item:flex-end 交叉轴的终点对齐
  • align-item: center 居中
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值