常用的flexbox布局----flex属性

最新推荐文章于 2022-07-29 11:41:18 发布

艾码仕

最新推荐文章于 2022-07-29 11:41:18 发布

阅读量162

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/deng_zhihao692817/article/details/100702849

版权

vue.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

flex(flex items)属性

这个属性定义在子元素中，是flex-grow、flex-shrink、flex-basis这三个属性的缩写。默认值为“0 1 auto”：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>flex</title>
    <style>
      .box {
        display: flex;
        display: -webkit-flex;
      }
      .item1, .item2, .item3 {
        background: #FFA500;
        padding: 10px;
        height: 100px;
        margin-right: 10px;
        text-align: center;
        flex: 1;
      }
      .item2 {
        flex: 2 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item1">flex</div>
      <div class="item2">flex-double</div>
      <div class="item3">flex</div>
    </div>
  </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾码仕

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用的flexbox布局----flex属性

flex(flex items)属性这个属性定义在子元素中，是flex-grow、flex-shrink、flex-basis这三个属性的缩写。默认值为“0 1 auto”：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>flex<...
复制链接

扫一扫