今天看到官網Bootstrap 4的Nabars,好奇他的Navbar怎麼排版的
發現竟然是使用flex去編排,但是搜尋位置竟然可以靠右
中間空白是怎麼用的??查了一下,發現他有使用margin
究竟flex和margin碰在一起會產生甚麼化學反應呢?
讓我們紀錄吧!!!
在講flex之前,我就有紀錄過margin搭配position可以置中,但其他是有公式的
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ +’border-right-width’ + ‘margin-right’ = width of containing block
margin-left: auto;为什么可以使的元素靠右 - SharkU的回答 - SegmentFault 思否
margin-right 不设置的话默认是0,width 定宽之后,margin-left取值为 auto ,自动占据了剩余的全部宽度,具体见 《css权威指南》 P170
studyFiles/CSS权威指南(第三版)(jb51.net).pdf at master · threerocks/studyFiles.pdf)
bootstrap 4 是用 左邊最後一個元素加上margin-right:auto
右邊會靠右
當然反過來也可以在左邊search 加上margin-left:auto
在簡書看到我想知道的東西(備份:https://screenshots.firefox.com/0gK3HJq4OS6WkyCk/www.jianshu.com)
Flex布局算法中对auto margins的对齐原理有如下解释,原文是英文,我尽量准确翻译:
在主轴(main axis)方向
如剩余空间为正数,则剩余空间会被平均分配在拥有主轴方向auto margin(s)的flex元素之间。
如剩余空间为负数,则将主轴方向的auto margin(s)设定为‘0’。
看过这些例图,auto margins的使用方法应该不会忘了吧。最后再来提个醒儿:
- auto margins仅针对当前的flex item,对其子元素无效。
- 在计算flex-bases与flexible lengths (main size与cross size)时,auto margins取值为0。
- auto margins优先于justify-content与align-self。由于相应方向上的剩余空间已分配给auto margins,justify-content与align-self将无效。
- auto margins对溢出的(overflowing)flex item无效。
作者:蜂蜜柚子茶
链接:https://www.jianshu.com/p/beeb93a76830
來源:简书
沒想到還能這樣用,筆記筆記…