深入解析CSS第五章Flexbox的原则——读书笔记

5.1 Flexbox的原则

• 给元素添加display:flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）
• 弹性子元素高度相等，该高度由它们的内容决定
• 一个弹性容器能控制内部元素的布局
  

使用flex布局简单实现一个网页

• 网页的基础样式
  

5.1.1 创建一个基础的Flexbox菜单

—————————————————
浏览器前缀

• 旧版Safari实现的是display:-webkit-flex
  
  属性名之前也要加前缀
  
• 在IE10
  
• 可以使用Autoprefixer来自动化这一流程
  在VSCode中使用Autoprefixer

5.1.2 添加内边距和间隔

在这个例子里，应当把菜单项内边距加到内部的元素上，而不是

元素上。

使用外边框给弹性子元素加上间隔

• 只给一个元素（About）加了auto外边距。如果希望将Support菜单项和About菜单项都推到右侧，则可以把auto外边距加到Support菜单项上。