关于css:css弹性盒子

7次阅读

共计 554 个字符,预计需要花费 2 分钟才能阅读完成。

css 中弹性盒子

display:flex; 实现了真正的弹性盒子;

flex-direction: 弹性盒子的排列形式;

row: 从左到右;

row-reverse: 从右向左;

column: 从上往下;

column-reverse:从下往上;

flex-warp:设置我的项目的换行形式;

warp:超出一行主动换行;

nowarp:不换行,自适应;

warp-reverse:将内容颠倒换行;

justify-content: 内容的对齐形式;

flex-start:内容靠左对齐;

flex-end:内容向右对齐;

center:内容居中对齐;

space-between:两端对齐,两端固定值,两头平分;

space-around:两端居中对齐,每个 div 两端成果都是一样的;

align-items: 容器内额定空间的解决

flex-start: 向右对齐;

flex-end:向左对齐;

flex-center:居中对齐;

base-line:成果同 flex-start;

stratch: 默认成果;

flex:让容器按比例调配

值:间接写数字

例如:

flex:2;意思是一行排只能排两个元素;

order:排序;

值:数字

例如:

order:2;意思就是这个标签显示进去的程序

// 本期的教程到了这里就完结啦, 是不是很简略! 是不是很棒! 让咱们一起致力走向巅峰!

正文完
 0