请问老师一些问题

来源:5-1 flex-card布局

hy_wang

2018-05-31 16:47:45

老师我这章节有两个疑问
1-direction改变了主轴的方向,那么其他比如说justify-content和align-items对应也会变换常规deweizhi
2-justify-content是针对整体来说还是单行,当改变主轴方向为从上到下的时候。

写回答

1回答

好帮手慕夭夭

2018-05-31

如下代码中 :

http://img.mukewang.com/climg/5b0fc9fa000139ff01640109.jpg

为div设置如下flex-direction: column;

http://img.mukewang.com/climg/5b0fca980001ea3b03140201.jpg

浏览器效果:

http://img.mukewang.com/climg/5b0fca610001d8f903780216.jpg

可以看出整体垂直居中对齐 .

把flex-direction值改为row

http://img.mukewang.com/climg/5b0fcafe000110f102240038.jpg

效果如下:

http://img.mukewang.com/climg/5b0fcb560001805b03350217.jpg

整体水平居中对齐 .

div改为如下设置:

http://img.mukewang.com/climg/5b0fcbbb0001198503200183.jpg

效果如下:

http://img.mukewang.com/climg/5b0fcb740001f72a03380234.jpg

整体水平居中

修改flex-direction值为row;


http://img.mukewang.com/climg/5b0fcbde0001f0ff03250269.jpg

整体垂直居中  , 所以 改变flex-direction会影响 align-items与justify-content ,并且 justify-conten是针对的整体哦 . 自己动手实战一下吧 ,祝学习愉快 !

1

0 学习 · 5012 问题

查看课程