当前位置: 首页 > Web前端 > CSS

CSSflexbox指南

时间:2023-03-30 23:34:28 CSS

控制对齐需要的属性为了控制“对齐”,会用到以下属性:justify-content——控制所有项目在主轴上的对齐;align-items——控制所有item在横轴上的对齐方式;align-self——控制特定项在横轴上的对齐方式;align-content——当项目数量过多无法占据多行时,控制横轴上每行之间的空间分布;主轴&横轴主轴和横轴相当于二维坐标系的横轴和纵轴。显示时:flex;在容器的css参数中设置,容器就变成了一个flexbox。这时候我们可以通过设置flex-direction:row来控制容器中item的排列方向;或flex-direction:column;row表示横向排列,column表示纵向排列。另外,可以取的值有:row-reverse和column-reverse,它们只是相对于row和column改变了方向。值得注意的是,主轴和横轴的方向会根据flex-direction的值而变化。flex-direction:row时,主轴与横轴的关系如下图:flex-direction:column时,主轴与横轴的关系如下图:justify-内容示例:one

两个
三个
四个
五个css文件:html,body{margin:0;填充:0;}.container{高度:600px;宽度:600px;顶部边距:20px;左边距:20px;显示:弹性;边框:1px黑色虚线;弹性方向:行;}.item{背景色:#666;margin-right:2px;}如你所见,我们有一个高度为600px,宽度为600px的容器。并设置显示:flex;对于容器,也通过flex-direction:row指定item的排列方向为水平排列;我们只为里面的项目设置背景颜色和2px的右边距。效果如图:可以看到,在不设置item的height和width属性的情况下,item默认在container中被拉伸填满容器。现在,我们设置项目的高度和宽度属性:.item{width:100px;高度:100px;背景色:#666;margin-right:2px;}效果如下图:可以看到,拉伸效果消失了。此外,所有项目都自动左对齐。那么如果我们想让所有的item都右对齐怎么办呢?这是justify-content属性派上用场的时候。justify-content属性,简单来说就是控制item在主轴上的对齐方式。可能的值有:justify-content:flex-startjustify-content:flex-endjustify-content:centerjustify-content:space-betweenjustify-content:space-aroundjustify-content:stretchjustify-content:space-evenly对应各个属性value效果如下:flex-start(默认效果).container{height:600px;宽度:600px;证明内容:flex-start;...}flex-end.container{高度:600px;宽度:600px;证明内容:flex-end;...}center.container{高度:600px;宽度:600px;证明内容:居中;...}space-between.container{高度:600px;宽度:600px;间隔;...}space-between属性值可以让每个item两边都没有margin,平均分配item之间的间距。P.S:图中最右边的2pxmargin是之前设置的item的右边距。space-around.container{高度:600px;宽度:600px;证明内容:空间周围;...}可以看到,正如around所暗示的那样,与space-between不同的是,这次在两边都分配了空间。而且,子容器沿主轴均匀分布,首尾两端的子容器与父容器的距离为子容器之间距离的一半。Stretch不生效,因为设置了item的宽高。space-evenly.container{高度:600px;宽度:600px;证明内容:空间均匀;...}space-evenly指的是空间平均分布。align-items从上面的例子可以看出,当我们的item水平排列时,justify-content控制元素在水平方向的对齐方式。那么我们要控制垂直方向的item排列应该怎么办呢?这时候就需要用到align-item属性。为了便于理解,这次我们只使用一个容器和一个项目,不设置justify-content。html文件:一个css样式html,body{margin:0;填充:0;}.container{高度:600px;宽度:100px;顶部边距:20px;左边距:20px;显示:弹性;边框:1px黑色虚线;flex-direction:row;}.item{height:50px;宽度:50px;background-color:#666;}效果如下图所示:可以看到,在横轴上(本例中也就是在纵轴上),item的默认排列方式也是flex-开始。align-items可以取的值也和justify-content类似:align-items:flex-startalign-items:flex-endalign-items:centeralign-items:stretchalign-items:baselineflex-start(默认值).container{高度:600px;宽度:100px;显示:弹性;弹性方向:行;对齐项目:弹性启动;...}效果如上图所示。flex-end.container{高度:600px;宽度:100px;显示:弹性;弹性方向:行;对齐项目:flex-end;...}flex-center.container{高度:600px;宽度:100px;显示:弹性;弹性方向:行;对齐项目:居中;...}stretch同理,由于已经设置了item的宽高,所以stretch不会产生拉伸效果。.container{高度:600px;宽度:100px;显示:弹性;弹性方向:行;对齐项目:拉伸;...}base-line为了表示基线对齐,我们使用了三个item,效果如图:这三个item的宽度相同,高度分别为60px、80px、100px。他们都使用
让文本改变一行。它们仍然在横轴上对齐基线。这里的基线默认是指第一行文本的基线。同时使用justify-content和align-items属性就像在横坐标和纵坐标的直角坐标系中定位一个点。我们可以同时使用这两个属性来定位一个item在容器中的位置。例如,我们想将一个项目放置在容器的中间。可以这样写:再比如,你想在盒子的中轴上分布三个item,它们之间的间距是相等的:可以看到,这里我们使用justify-content:space-between来使得这三项之间的间距是相等的。并传递aling-items:center使它们在交叉轴方向的中间。flex-direction:itemlayoutincolumn此时的item布局原则与flex-direction:row一致。只是这次把主轴改为垂直方向,横轴改为水平方向。根据我们上面提到的原理,我们不妨举个例子。比如有3个item是竖排的,我们希望它们能实现下图的设计:我们可以这样设置我们的css样式:.box{height:300px;显示:弹性;弹性方向:列;对齐项目:居中;justify-content:flex-end;}通过justify-content:flex-end,我们实现了这三个item排列在主轴(本例为纵轴)的末端(end);然后通过align-items:center我们发现这三个项目排列在横轴(本例中为横轴)的中间。综合起来,就形成了这样的布局。关于start和end,为了简单起见,我们可以直接将start理解为坐标系原点的方向,end为坐标轴箭头指向的无穷远方向。需要指出的是,对于从左到右的书写方式,比如中文和英文,start可以理解为left,end可以理解为right,而对于从右到左的书写方式,比如阿拉伯文,有start可以理解为右,end可以理解为左。align-self当我们为一个盒子容器设置了align-items和justify-content属性时,这组约束的规则将适用于其中的所有项目。但是,如果我们不希望某个项目受到这套规则的约束怎么办?这时候align-self就派上用场了。align-self属性可以取align-items属性的所有值。比如上面的例子,如果我们将item3的align-self值设置为:align-self:flex-end;,那么:这相当于item3对外宣告,它不接受align-的规则由items设置,而是要设置自己的规则,这就是为什么align-self可以取与align-items相同的值。align-content到目前为止,我们已经讨论了flex容器中单个或多个容器的对齐方式。如果我们有一个flex容器,里面的项目占据了多行,我们可以使用align-content属性来控制行与行之间的空间分布。要使align-content起作用,容器的高度需要高于每行中项目的总高度之和。align-content属性可以取的值如下:align-content:flex-startalign-content:flex-endalign-content:centeralign-content:space-betweenalign-content:space-aroundalign-content:stretchalign-内容:例如,当将Align-content选择为Flex-End时,存在:这些属性值与上述函数一致,并且不会再次描述。