-
Notifications
You must be signed in to change notification settings - Fork 733
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS Flex布局 #41
Labels
Comments
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
行内元素也可以使用Flex布局。
|
我们可以对header盒子增加一个
|
参考:Flex 布局教程:实例篇
|
写了个比较全的DEMO
|
参考:Wsscat的例子 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
样式如下
用flex和百分比同样做响应式布局,效果一样,但是方法不一样
传统布局方法一般是基于盒状模型的,通过display属性,position属性和float属性达到目的。它这对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
这里header相当于一个flex的盒模型,里面的div根据这个盒做相应的改变
上面flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。比如上面就把每个div分成四个1,每个占四份之一
flex设置为1就是默认设置flex-grow,flex-shrink和flex-basis属性值
flex-basis属性用于设置或检索弹性盒伸缩基准值
<script> var divs = document.getElementsByTagName("div"); console.log(divs); divs[2].style.flexBasis="200px"; </script>注意:如果元素不是弹性盒对象的元素,则 flex-basis 属性不起作用
如果用JS写的话就用这种
注意:display: box; 是 2009版本. display: flex;是2011修订版
The text was updated successfully, but these errors were encountered: