<style>
/*
------------------
- - - - - - - -
- - - - - - - -
- -
- -
------------------
外部的大矩形就是flexContainer 内部每一个小矩形都是flexItem
*/
.container{
display:flex;
width:500px;
border:solid 1px blue;
flex-direction:row;/*起始是以那个方向为基准按顺序排列 可选值有row(从左到右) column(从上到下) row-reverse(从右到左) column-reverse(从下到上)*/
/*justify-content:space-evenly;*/
/*以flex-direction属性为基准(如果没有设置flex-direction,则默认flex-direction为row,flex-direction也称为主轴方向。)，来决定整个flex item集合的排列方式 可选值有flex-start(在主轴上(从start方向)从左或者上排列) flex-end(在主轴上从end方向)右或者下排列 center(在主轴上居中排列)
space-between 任何两个相邻 flexItem 项之间的间距是相同的，但不一定等于第一个/最后一个 flexItem 项与 flexItem 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。
space-evenly flexContainer 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。
space-around flexContainer 容器中的每个 flexItem 项的每一侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍。*/
/*align-items:baseline;*/
/* 以整个flexItem集合为一个整体移动
flex-start 主轴方向从左到右或从上到下
flex-end 以主轴为对称轴平移至另一边相同位置
center 以主轴为参照，移动到距离主轴两边平行线相等的位置
stretch 默认值 如果项目未设置高度或设为auto，将占满整个容器的高度。
baseline flexITem的第一行文字的基线对齐
*/
/*align-content:stretch;*/
/*
当flexItem没有超过一行或一列时,该属性无法生效。
flex-start 主轴方向从左到右或从上到下
flex-end 将整个flexItem向主轴方向平移到另一端。
flex-center 以主轴为参照，移动到距离主轴两边平行线相等的位置
space-between 任何两个相邻 flexItem 项之间的间距是相同的，但不一定等于第一个/最后一个 flexItem 项与 flexItem 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。
space-around每个flexItem之间距离相等，第一和最后一个flexItem距离边界的距离是flexItem之间的一半。
stretch 默认值 flexItems占满整个容器。
*/
/*flex-wrap:wrap-reverse;*/
/*
wrap 当一行或一列无法容纳所有flexItem时，会将溢出的flexItem放到第二行或第二列(需要注意的是第二行或第二列位置会始终居于上一行和下面边界的中间，也就是第二行的上外边距与下外边距始终相等)。
nowrap 溢出时，不换行，会采用默认处理行为，flexContainer会将所有flexItem等比例缩小，以致可以完全放入一行或一列。
wrap-reverse align-items等于flex-end之后flex-wrap等于wrap行为的结合
*/
}
.item{
width:100px;
height:100px;
border:solid 1px red;
/*
以下为处于flexContainer中的flexItem可选属性
order int类型 决定在flexItems中排列的位置，值越小，排列越靠前。默认0,(支持负值,不支持小数)。
flex-grow number类型 flexItem相对于其它flexItem的放大比例，前提是得有剩余空间。默认0,(支持正整数，小数，值为0的话，默认不放大，即使有空间，当然还是要受到容器默认对溢出处理的影响)
flex-shrink number类型 flexItem相对于其它flexItem的缩小比例，前提是空间不足的情况下，默认1(支持正整数，小数，值为1的话，默认不缩小，即使空间不够，当然还是要受到容器默认对溢出处理的影响)
flex-basis 设置主轴空间大小，上面的flex-grow和flex-shirink属性就是依赖于主轴是否有剩余空间来放大的或者主轴空间是否不足来设置的
flex flex-grow flex-shrink flex-basis 三者的结合属性 参数也是该三项的值(默认值0,1,auto)
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
*/
}
</style>
<body>
<!-- flex conatiner -->
<div class="container">
<!-- flex item -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item" style="flex-shrink:0.5">4</div>
</div>
</body>
CSS3弹性布局
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章