网站seo需要用到哪些工具,网站建设及维护,织梦做网站被告,wordpress网站静态页面主要记录flex布局的要点以及实例 flex flex父标签的6个属性flex-direction: flex布局的方向flex-wrap: 是否可以换行flex-flow: flex-direction 和 flex-wrap 一起写justify-content#xff1a;横向对齐方式align-items: 纵向对齐方式align-content: 有换行情况下的纵向对齐方… 主要记录flex布局的要点以及实例 flex flex父标签的6个属性flex-direction: flex布局的方向flex-wrap: 是否可以换行flex-flow: flex-direction 和 flex-wrap 一起写justify-content横向对齐方式align-items: 纵向对齐方式align-content: 有换行情况下的纵向对齐方式 flex子标签item的6个属性order定义顺序值越小越靠前flex-basis: 可以用来修改item的宽度即使设置了widthflex-grow: 定义项目的放大比例flex-grow为小数 flex-shrink: 缩小itemflex: flex-grow, flex-shrink 和 flex-basis的简写align-self flex父标签的6个属性
flex包含6个属性分别为flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。
flex-direction: flex布局的方向
.container {flex-direction: row | row-reverse | column | column-reverse;
}row表示按照行正序排列 row-reverse表示按照行反序排列 column表示按照列正序排列 column-reverse表示按照列反序排列
flex-wrap: 是否可以换行
.container {flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap为默认值默认不换行 wrap表示换行 wrap-reverse表示反向换行如第一行在下面第二行在上面
flex-flow: flex-direction 和 flex-wrap 一起写
.container {flex-flow: flex-direction || flex-wrap;
}好像没啥用分开写比较明朗点
justify-content横向对齐方式
.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}flex-start表示左对齐 flex-end表示右对齐 center表示横向居中对齐 space-between两端对齐间隙为两个item之间最左边最右边没有空隙 space-around间隙为环绕一个item最左边最右边有空隙
align-items: 纵向对齐方式
.container {align-items: flex-start | flex-end | center | baseline | stretch;
}stretch为默认值表示item为设置高度的时候占满整个高度 flex-start表示上对齐 flex-end表示下对齐 center表示纵向居中对齐 baseline表示按照第一行文字对齐
align-content: 有换行情况下的纵向对齐方式
.container {align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}stretch表示自动占满默认值 flex-start表示全部上对齐 flex-end表示全部下对齐 center表示全部纵向居中对齐 space-between表示全部项目间间隔对齐 space-around表示全部项目环绕间隔对齐 space-evenly表示所有间隔都相等 flex子标签item的6个属性
item包含6个属性分别为order、flex-basis、flex-grow、flex-shrink、flex、align-self。
order定义顺序值越小越靠前 将33的盒子order设置为-1变为 emmm那我在没设置11和22时候他们的order是啥呢查了一下order默认值为0 用了个笨办法11的order不设置22的order设置为-0.001,33的order设置为0.001失败了order设置为浮点数好像不行需要设置为整数。 设置为整数时候验证成功order默认值为0虽然不严谨
flex-basis: 可以用来修改item的宽度即使设置了width
.item {flex-basis: length | auto;
}默认值为auto即item本来的大小。 当把flex-basis设置为x%则item本身的width会失效。 当把flex-basis设置为auto则item的宽度即为width。 这边将11的div的flex-basis设置为10% 设置的宽度最小为内容的宽度上图中最小都不能小于11文字的宽度了。 看到别的文章写的需要修改flex-grow和flex-shrink才能起作用这边验证一下。 只能说说的有那两个属性才能起作用只是一定程度上的意义吧以为flex-basis确实是可以单独设置的。
flex-grow: 定义项目的放大比例
.item {flex-grow: number;
}默认值为0。 当通过flex-basis设置后还剩下空位剩下的空间需要flex-grow处理。 如果其他的flex-grow设置为1则等分剩余空间。 变为 flex-grow设置的值为其他的两倍则宽度也为两倍。 有个待解决的问题 当container过小的时候flex-grow不生效 这边的22的flex-grow为1,33的flex-grow为2但是很明显没有达到1:2的比例。
flex-grow为小数 https://blog.csdn.net/HH18700418030/article/details/126995969 flex-grow 属性值为小数分两种情况 1所有 flex 项的 flex-gorw 属性值之和大于1仍然按照上面正整数方式进行计算 2所有 flex 项的 flex-gorw 属性值之和小于1基值按照1来进行计算。 例子项目1为 0.1 项目2为 0.3项目3为 0.1 项目4为 0.2项目5为 0.1则它们分配到的剩余空间分别为 项目1: 900px * (0.1 / 1) 94.7px; 项目2: 900px * (0.3 / 1) 265.31px; 项目3: 900px * (0.1 / 1) 94.7px; 项目4: 900px * (0.2 / 1) 180px; 项目5: 900px * (0.1 / 1) 94.7px; 引用上面的文章
flex-shrink: 缩小item
.item {flex-shrink: number;
}flex-shrink默认值为1空间不够的时候缩小。 当某个item的flex-shrink设置为0则该item不缩小其他设置为1的缩小。 以上33的flex-shrink设置为了0因此不管怎么样它都不缩小而11和22由于flex-shrink为默认的1因此根据内容缩小。 当然缩小到没办法缩小33就放飞自我出去了。
flex: flex-grow, flex-shrink 和 flex-basis的简写
这也就是为啥很多代码使用了flex:1因为就是flex-grow设置为1即自动填充剩余空间
.item{flex: none | [ flex-grow flex-shrink? || flex-basis ]
}当flex为百分比或者px时候设置的就为flex-basis的值 如果为整数就是flex-grow以此类推。
align-self
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}跟align-items的类似只是这个只针对单个item。 不同的就是autoauto: 默认 表示继承父级元素的 align-items属性。 而align-items里没有auto默认值为stretch。
