|
|
@@ -0,0 +1,56 @@
|
|
|
+.box {
|
|
|
+ width: auto;
|
|
|
+ display: flex;
|
|
|
+ height: 200px;
|
|
|
+ background: aqua;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+}
|
|
|
+.box1,.box2,.box3 {
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+.box1 {
|
|
|
+ background: #00f;
|
|
|
+ align-self: baseline ;
|
|
|
+ height: 200px;
|
|
|
+ flex-basis: 200px;
|
|
|
+ /* order: 3; */
|
|
|
+ /* flex-grow: 1; */
|
|
|
+ /* flex-shrink: 1; */
|
|
|
+ /* width: 100px; */
|
|
|
+ /* flex-basis:auto; */
|
|
|
+}
|
|
|
+.box2 {
|
|
|
+ background: #ff0;
|
|
|
+ height: 100px;
|
|
|
+ /* order: -7; */
|
|
|
+ /* flex-grow: 3; */
|
|
|
+ /* flex-shrink: 0; */
|
|
|
+ /* flex-basis:200px; */
|
|
|
+}
|
|
|
+.box3 {
|
|
|
+ /* width: 100px; */
|
|
|
+ background: #f00;
|
|
|
+ height: 100px;
|
|
|
+ /* order: 1; */
|
|
|
+ /* flex-grow: 1; */
|
|
|
+ /* flex-shrink: 1; */
|
|
|
+ /* flex-basis:auto; */
|
|
|
+}
|
|
|
+/*
|
|
|
+ 弹性盒的项目属性：
|
|
|
+ 1.order:数字； 项目的排列顺序 数字越小越靠前 默认为0 允许负值
|
|
|
+ 2.flex-grow:定义项目的放大比例;不允许负值，默认是0；
|
|
|
+ 3.flex-shrink:定义了项目的缩小比例，默认为1,0不会发生改变，不允许负值
|
|
|
+ 4.flex-basis：定义项目在分配额外空间之前的缺省尺寸 默认auto
|
|
|
+ 5.flex: flex-grow flex-shrink flex-basis(0,1,auto);
|
|
|
+ 便携值：auto (1 1 auto) 和 none (0 0 auto)
|
|
|
+ 6.align-self:项目对齐的方式
|
|
|
+ auto 继承父级的align-items属性
|
|
|
+ 如果没有父级 贼等同于stretch
|
|
|
+ flex-start 交叉轴的起点对齐
|
|
|
+ flex-end 交叉轴的终点对齐
|
|
|
+ center 交叉轴的中心点对齐
|
|
|
+ baseline 项目的第一行文字的基线对齐
|
|
|
+ stretch 如果项目未设置高度或设为auto 将占满整个屏幕
|
|
|
+*/
|
e