主轴对齐的方向是通过flex-direction决定?

主轴对齐的方向是通过flex-direction决定?

主轴对齐方式 justify-content 在视频中是水平方向的,若设置 flex-direction: wrap|wrap-reverse 后,主轴对齐是垂直方向,交叉轴对齐 align-items 是水平方向的?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,理解的有些误差,具体可以参考如下解析:

1、主轴上元素对齐的方向是通过justify-content属性设置的,与flex-direction属性无关。

2、flex-direction属性不可以设置wrap或wrap-reverse

flex-direction属性就是规定项目的对齐方式,该属性可以设置的值应该是:row|row-reverse|column|column-reserse

3、wrap或wrap-reverse​flex-wrap 属性可以设置的值,规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

4、align-items 和 align-content 属性都是用来设置交叉轴上项目的对齐方式。它俩的区别就是必须有多行的项目,align-content属性才可以生效。

5、视频中老师设置flex-wrap:wrap;属性值,并没有改变主轴的方式,此时的主轴还是默认的水平方式,交叉轴是垂直方法。align-content属性设置的交叉轴的对齐方式,如果要设置主轴的对齐方式,使用justify-content属性就可以了。

http://img1.sycdn.imooc.com//climg/5f9a5b6509e7295915210682.jpg


祝学习愉快~

  • rayyli 提问者 #1
    老师,我打错了......意思应该是用flex-direction属性改变主轴方向后,justify-content、align-items、align-content的方向也跟着变化的? 设置flex-direction: column;后,justify-content会变成垂直方向、align-items、align-content会变成垂直方向?
    2020-10-29 14:41:09
  • 好帮手慕慕子 回复 提问者 rayyli #2
    同学你好,是的,理解是正确的,祝学习愉快~
    2020-10-29 18:44:22
  • 测轴方向可以设置吗?侧轴只有垂直向下和水平向右 两种可能吗?

    2023-04-16 11:17:02
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师