1027 Flex 弹性布局

最新推荐文章于 2024-10-27 15:14:37 发布

CV攻城师

最新推荐文章于 2024-10-27 15:14:37 发布

阅读量220

点赞数

分类专栏：笔记文章标签： flex html5

本文链接：https://blog.csdn.net/CF1402345274/article/details/109322938

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

魔赞商城

类似 banner 图，相互重叠在一起怎么在 img 的上方，我先按着左右来划分了
jusitfy-conten 左右居中默认边高子元素没有高的话，自动和父级的元素一样。
align-items: center; 上下居中本身宽高去除了默认父元素的高，但是他有自己的高的话就不会去除
justify-content: space-around; 左右有间距
justify-content: space-between; 左右里边没有间距
按钮的大小可以用 padding 和 line-height 来撑开

元素居中的方案
前提一点就是必须有宽度或者高度

* {
  /* 第一种方案 适合于文字*/
  line-height: 100px;
  text-align: center;
  /* 第二种方案 任何东西都适合*/
  display: flex;
  justify-content: center;
  align-items: center;
}


.bottom-list{$哈哈哈}*7   用{}包围的就是标签内的内容
          <div class="bottom-list">1哈哈哈</div>
          <div class="bottom-list">2哈哈哈</div>
.bottom-list-[v-model]*7  在[]添加的话相当于添加属性
          <div class="bottom-list-" v-model=""></div>
          <div class="bottom-list-" v-model=""></div>
.bottom-list-$*7  没有括号包围 $的话就是连续的数字
          <div class="bottom-list-1"></div>
          <div class="bottom-list-2"></div>