flex布局

最新推荐文章于 2025-05-20 18:08:57 发布

废物的自我修养记录

最新推荐文章于 2025-05-20 18:08:57 发布

阅读量426

点赞数

分类专栏：笔记文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/qq_45989814/article/details/122137063

版权

笔记专栏收录该内容

58 篇文章

订阅专栏

flex-direction:row

 <div class="container">
      <p>one</p>
      <p>two</p>
      <p>three</p>
   </div>
   
.container{
  margin:20px 20px;
  width:300px;
  height:200px;
  box-sizing: border-box;
  padding: 5px 5px;
  background: #fff;
  display:flex;
  flex-direction: row;
}
p{
  background: greenyellow;
  margin: 2px 2px;
  height:20px;
}

在这里插入图片描述
flex-direction:row-reverse

flex-direction:column

<div class="container">
      <p>one</p>
      <p>two</p>
      <p>three</p>
 </div>

.container{
  margin:20px 20px;
  width:300px;
  height:200px;
  box-sizing: border-box;
  padding: 5px 5px;
  background: #fff;
  display:flex;
  flex-direction: column;
}
p{
  background: greenyellow;
  margin: 2px 2px;
  height:20px;
}

在这里插入图片描述
flex-direction:column-reverse

align-items属性有助于将项目定位在垂直于项目主轴的横轴上。
有四个不同的值：stretch、flex-start、flex-end、center
默认设置的是stretch，这就是为什么容器中的项目会自动拉伸到与容器相同的高度(直观上宽度，因为设置的与主轴垂直的，主轴现在变成column，所以设置的是row)
接着flex-direction：coumn举例子、
align-items:flex-start

.container{
  margin:20px 20px;
  width:300px;
  height:200px;
  box-sizing: border-box;
  padding: 5px 5px;
  background: #fff;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}
p{
  background: greenyellow;
  margin: 2px 2px;
  height:20px;
}

在这里插入图片描述
align-items:center

align-items:flex-end
在这里插入图片描述
justify-content 属性
jusify-content属性作用于主轴上对齐项目，这与容器中的项目相同，它有六个不同的值：flex-start、flex-end、center、space-around、space-between、space-evenly
flex-start、flex-end、center的作用与它们应用于align-items属性时的作用相同，只是在主轴上而不是垂直于主轴。