复习 Flex 布局排列和对齐

最新推荐文章于 2024-05-23 01:28:45 发布

<李小狮 / >

最新推荐文章于 2024-05-23 01:28:45 发布

阅读量330

点赞数

分类专栏： CSS 实例文章标签： css flex

本文链接：https://blog.csdn.net/AN_MEI/article/details/107287715

版权

本文深入探讨了Flex布局中的文字基线对齐概念，通过实例展示了如何使用CSS的flex属性实现元素的对齐排列。重点讲解了基线对齐方式，以30px字体大小为基准，确保不同元素的文字保持一致的对齐效果。

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

<view class="container">
  <view class="s1">A</view>
  <view class="s2">A</view>
  <view class="s3">A</view>
  <view class="s4">A</view>
</view>

.container{
  display: flex;
  background-color: pink;
  height: 200px;
  /* 排列方向 */
  /* 横向-顺序 */
  flex-direction: row;
  /* 横向-逆序 */
  /* flex-direction: row-reverse; */
  /* 纵向-顺序 */
  /* flex-direction: column; */
  /* 纵向-逆序 */
  /* flex-direction: column-reverse; */
  
  /* X轴的排列方式 */
  /* 起点对齐，就是左对齐 */
  /* justify-content: flex-start; */
  /* 右对齐 */
  /* justify-content: flex-end; */
  /* 居中对齐 */
  /* justify-content: center; */
  /* 两端对齐 */
  /* justify-content: space-between; */
  /* 等分对齐 */
  justify-content: space-around;

  /* Y轴的排列方式 */
  /* 顶端对齐 */
  /* align-items: flex-start; */
  /* 底部对齐 */
  /* align-items: flex-end; */
  /* 垂直居中对齐 */
  /* align-items: center; */
  /* 拉伸上下两端对齐  里面是项的高度要设置