Flex 布局

2021-06-04 13:03:15 阅读：209 来源： 互联网

标签：Flex around space 布局 flex between row

Flex布局

一种非常方便的布局方式。在容器中记住4个样式

display: flex; flex布局 
flex-direction: row; 规定主轴的方向：row/column 
justify-content: space-around; 元素在主轴方向上的排列方式:flex-start/flex- end/space-around/space-between 
align-items: center; 元素在副轴方向上的排列方式:flex-start/flex- end/space-around/space-between

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
 <style>
      
.menu{
  height:200px;
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items:center
}
.item{
  width:20px;
  height:40px;
  border:solid green;
  background:red;
}
  </style>
</head>
<body>
  <div class="menu">
    <div class="item">
      1
    </div>
      <div class="item">
      2
    </div>
    <div class="item">
      3
    </div>
    <div class="item">
      4
    </div>
  </div>
    
</body>
</html>

标签：Flex,around,space,布局,flex,between,row
来源： https://www.cnblogs.com/huahuawang/p/14849090.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Flex 布局