A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 游运连 初级黑马   /  2019-4-11 13:31  /  1006 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

想让子元素变为弹性盒子给父元素添加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,数值越小越靠前。




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马