0
点赞
收藏
分享

微信扫一扫

SpringBoot 使用@Async 注解实现异步任务

Java旺 03-01 19:00 阅读 3

1、主轴对齐方式---justify-content

        flex-start:默认值,盒子从起点依次排列

        flex-end:盒子从终点依次排列

        center:盒子沿主轴居中排列

        space-bewtteen:盒子沿主轴均匀排列,空白间距均分在盒子之间

        space-around:盒子沿主轴均匀排列,空白间距均分在盒子两侧

        space-evenly:盒子沿主轴均匀排列,盒子与容器之间间距相等

flex-start
flex-end
center
space-bewtteen
space-evenly
space-around

2、侧轴对齐方式---align-items

        stretch:默认,盒子沿侧轴线被拉伸至铺满容器。

        center:盒子沿侧轴居中排列。

        flex-start:盒子从起点依次排列。

        flex-end:盒子从终点一次排列。

stretch
center
flex-start
flex-end

3、换行

        弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行展示。

        flex-wrap:no-wrap; 不换行

        flex-wrap:wrap; 换行

4、行对齐方式---align-content(适合于多行盒子) 

        flex-start:默认值,盒子从起点依次排列

        flex-end:盒子从终点依次排列

        center:盒子沿主轴居中排列

        space-bewtteen:盒子沿主轴均匀排列,空白间距均分在盒子之间

        space-around:盒子沿主轴均匀排列,空白间距均分在盒子两侧

        space-evenly:盒子沿主轴均匀排列,盒子与容器之间间距相等

flex-start
flex-end
center
space-bewtteen
space-around
space-evenly

5、修改主轴方向

        row:默认值,水平方向,从左到右

        column:垂直方向,从上到下

        row-reverse:水平方向,从右到左

        column-reverse:垂直方向,从下到上

6、 弹性伸缩比---flex

        整数数字,表示占用父级剩余尺寸的份数。

.box {
	width: 600px;
  height: 150px;
  background-color: pink;
  display: flex;
}
.content {
  width: 100px;
  height: 100px;
  background-color: lawngreen;
  border: 1px solid #333;
}
.son2 {
  flex: 1;
}
.son3 {
  flex: 3;
}

<div class="box">
  <div class="content son1"></div>
  <div class="content son2"></div>
  <div class="content son3"></div>
</div>

        

举报

相关推荐

0 条评论