CSS基础 – 弹性盒子模型 – flex布局详解编程语言

flex布局提供一种对容器中条目更方便地进行布局,控件分配,和对齐的方式。flex布局的容器能够根据窗口大小变化而改变条目的大小和位置,以呈现最佳的显示效果,它的优势在于开发者可只需要申明容器或其子条目的布局的方式,和窗口或容器大小变化时元素的行为,而不需要去实现具体的适应。

body {
direction:rtl;//定义body下的元素渲染的方向
}

.flex-container {

display:flex;

//申明display方式为:flex

 

flex-direction:row-reverse;

//在一行上,该容器的子条目将基于父级元素的direction,从右到左进行渲染

//flex-direction:row 默认为body.style.direction

//flex-direction:column 主轴为纵向,元素依次在纵向从上至下布局,在行方向则按照body.style.direction布局

//flex-direction:column-reverse 主轴为纵向,元素依次在纵向从下至上布局,在行方向则按照body.style.direction布局

 

flex-wrap:wrap-reverse;

//如果水平方向子条目的总宽度超过了容器宽度,则换行再根据flex-direction和body.style.direction进行布局,在主轴方向的行/列反向排列

//flex-wrap:unset 则默认不换行

//flex-wrap:wrap-reverse 换行并将垂直方向各行从底至顶(主轴为row)布局

justify-content:space-around;

//justify-content:flex-start 在主轴上,从文档的方向开始布局

//justify-content:flex-end 在主轴上,从文档的方向的反方向开始布局

//justify-content:space-around 条目之间等间距布局,在主轴上,首尾元素和容器之间增加间隔

//justify-content:space-between 条目之间等间距布局,在主轴上,首尾元素分别靠紧对应的容器边框

//justify-content:center 同行/列所欲条目居中

 

align-content:center;

//相对与主轴的垂直方向上,所有条目居中布局
align-items:flex-start;

//align-items:flex-end 若文档的方向为从左到右,则主轴方向元素右对齐

//在主轴方向上,在文档的布局方向上依次渲染flex-item

//align-items:baseline 条目的开始侧基于基准线对齐,align-items:stretch 若条目在相对于主轴的垂直方向的宽度为auto,则元素将被拉伸以填满交叉轴方向

}
.flex-item {
flex-shrink:1;

flex:1 0 auto;

//第一个值flex-grow,元素的放大比例,1表示放大,元素在特定方向平分容器剩余空间, 0表示不放大

//flex style:第二个值flex-shrink,1表示空间不足时,该元素将缩小以适应容器,0表示不自适应;第二个值

margin:auto;
margin-top:10px;
width:100px;
height:100px;
border-style:dotted solid;
border-color:orchid;

align-self:auto;

//默认继承容器的align-items,具体值则不适用容器的align-items,元素未设置高度且没有父元素时,则align-self为stretch.

font-size:30px;
font-weight:bolder;
}

相关链接:http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/15361.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论