CSS布局大揭秘！position vs. flex，谁更得心应手？

一、position布局

网页布置很关键！聊到这，不得不提一下CSS里的position布局，这可是咱们常用来排兵布阵的好工具。只需微调元素位置，就能随心所欲地摆布它们了。position布局包括静态、相对、绝对及固定四种方式。静态的话，就是按平时那样排列。而相对于过去的位置来讲，那便是相对。绝对，更厉害些，只认与之接近且具有定位功能的老大爷。最后这个固定更是神奇，不管界面怎么滚动，它依旧坚如磐石！另外，z-index属性还可以调节各类元素间的上下层级。

开发得用position布局！这个布局简单又好用，能够精确掌握元素的位置动态，特别适合那些要使用悬浮窗或者导航的小伙伴们。只需调整它的top、bottom、left、right等属性，页面内容就能轻松更改了！

二、flex布局

瞧，咱们要学Rectangle布局，接着就是Flex布局了。这个新东西在CSS3里出现，让网页更有活力，更好玩！操作挺容易，只要搞懂容器和项怎么用flex显示，还有他们的flex大小调整就行咯~

Static Box

Flex可比position方便多！想怎么搞就怎么调整那几个属性，像是flex-direction、justify-content和align-items，轻松摆平。这样弄出来的网页既整齐，代码量也不大。而且，虽然看起来有点儿乱七八糟，但是它可以随便适应各式各样的屏幕尺寸，真的很牛！

Relative Box

下面是一个使用flex布局实现子元素居中效果的示例代码：

“`

Absolute Box

.container {

Fixed Box

display: flex;

justify-content: center;

align-items: center;

}

三、比较与选择

搞设计的时候，得根据需求选布局。如果要准确把控元素位置怎么办？用Position布局准没错。想让网站自动适配各种设备都轻松吗？试试Flex布局，特别是响应式设计时，超级好用

做网页时，Flex布局真棒！快得飞起，用着还舒服；但要想玩转各种交互和特效，果断选Position布局，这货太牛了，灵活度没的说，上手也容易。

你可以试试看把这两个法子搭配在一起搞网页排版。比如，用Flex来搞定导航栏，然后运用Position做些特别效果，比如说提醒信息之类的。

  
Item 1
  
Item 2
  
Item 3

咱们今天聊个重要的话题，就是网页布局怎么选？我给你说说Position跟Flex这两个常用的布局方法，再给你举几个例子案例让你明白啥时候用哪种合适。只要你肯研究，相信你能优化网页结构，提升用户体验。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-item {
  flex: 1;
  margin: 10px;
}

。