黑马程序员技术交流社区

标题: flex布局 [打印本页]

---

作者: 游运连    时间: 2019-4-11 13:31
标题: flex布局
想让子元素变为弹性盒子给父元素添加display：flex；设置一盒子的排列方向和对齐方式。
1.给父盒子添加样式属性，控制子元素的排列方向和对齐方式
方向：默认跟主轴对齐
        flex-direction：row（默认主轴是x轴）
                ：column（主轴设为y轴）
对齐方式：
        主轴对齐：justify-content
       
        侧轴对齐：
                单行：align-items
                多行：align-content
子元素是否换行：
        flew-wrap：wrap（换行）
                ：nowrap（不换行）
2.给子元素添加样式属性，控制自身的缩放和排列
1）占的份数 flex
前提：有剩余的空间
数值：可以是正整数（默认值为0；不能设为0；）
        也可以是百分比%（相对于父元素，里面的子盒子可以给百分比）
比例值的计算：
        当前父元素中，所有兄弟元素flex值得和（总份数）
        如果没有flex，则默认为0，子元素不会占据剩余的空间。
2）单项目自身在侧轴的对齐方式：
        align-self
3）定义项目的排列顺序：
        order：0；
        默认值为0，数值越小越靠前。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2