flex布局整理 快速上手

快速目录 适合懂了记不住的人cv

左右(横向)
- 左对齐: justify-content : flex-start(默认,可以不写)
- 居中: justify-content : center
- 右对齐: justify-content : flex-end

上下(竖向)
-上对齐: align-items: flex-start(默认,可以不写)
- 居中: align-items: center
- 下对齐 align-items: flex-end

排列方式
- 横向: flex-direction : row
- 竖向: flex-direction : column

上下顶开

画个大的div套住 设高度,display:flex ,在空白区域套个空的div style写flex:1 用来顶开

高度很关键, 不生效主要就是外面这个div没有高度,或者没有设置flex

还有一点不生效的原因是,本来隐藏了div,显示时是用block导致flex生效,所以在设置

xxx.style.display时,不要写=block ,而是等于flex

<div id="user-info">
    <!--用户信息-->
     <div id="user-info-head">
         ...
     </div>
     <div style="flex:1"></div>
     <div id="user-info-bottom">
             <a href="login.html">退出登录</a>
     </div>
 </div>

效果如下 , 将头部置顶, 底部置底, 中间留空的设计

CSS样式

#user-info{
    display: flex;
    height: 100%;
    flex-direction: column;
}

如果是要左右顶住,中间空,就是把排列方式改成row即可.

---

一中一右

像在头部的div 中间是标题,右边是关闭按钮

外面大div 让里面的元素居中, 相对定位

#window-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 100%;
}

关闭按钮的div 绝对定位 右侧

#window-close-button{
  position: absolute;
  right: 24px;
}

---

具体布局:传送门