[ 深入CSS（下2）| 青训营笔记]

吃腻的奶油
94 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天，以下是我根据课程内容整理的笔记。

课堂笔记

课程重点

  1. justify-content
  2. align-items

笔记内容

Flex Box是什么？

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

    • 摆放的流向（→←一↑↓）

    • 摆放顺序

    • 盒子宽度和高度

    • 水平和垂直方向的对齐

    • 是否允许折行

弹性布局主轴与侧轴

image.png

主轴默认为水平方向，侧轴为垂直方向，使用flex-direction可以改变主轴与侧轴。

image.png

  • justify-content
div { 
    display: flex; 
    justify-content: space-around; 
}
对齐方式描述
justify-content: flex-start从行首起始位置开始排列
justify-content: flex-end从行尾位置开始排列
justify-content: center居中排列
justify-content: space-between均匀排列每个元素首个元素放置于起点，末尾元素放置于终点
justify-content: space-around均匀排列每个元素每个元素周围分配相同的空间
justify-content: space-evenly均匀排列每个元素每个元素之间的间隔相等
  • align-items
div { 
    display: flex; 
    flex-flow: row wrap; 
    align-content:space-around; 
}

image.png

对齐方式说明
flex-start元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
stretch默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
baseline元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

结语

通过本次课程的学习，真的收获到了许多，以前对一些比较模糊的知识点也逐渐的清晰了起来。

avatar
文章
阅读
粉丝