Flex 布局

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>

 2 flex:1 (与同级元素保持一样的宽度)

链接：https://www.runoob.com/cssref/css3-pr-flex.html

 

posted @ 2021-06-04 12:41  风hua  阅读(51)  评论(0)  编辑  收藏  举报