-
flex-direction
作用:子元素在父元素盒子中的排列方式
row (从左到右) row-reverse column(从上到下)column-reverse
注意:如果只设置display:flex 默认row布局方式
flex-wrap
作用:子元素在父元素盒子中 是否换行(列)
nowrap 默认值 不换行或不换列
warp 换行或换列
flex-flow 书写上述两个属性的简写形式
语法 flex-flow:flex-direction(排列方式) flex-wrap(换行方式);
查看全部 -
第三个值设置为auto的时候,宽度就生效了
查看全部 -
flex布局配置
设置了flex-basis之后元素上面的宽度将不再生效
flex-grow计算方式
flex-shrink的计算方式
查看全部 -
flex布局配置
查看全部 -
flex布局配置
查看全部 -
flex布局属性
查看全部 -
Flex的概念
查看全部 -
媒体查询
查看全部 -
<template>
<div id="div0">
<form>
<div id="form">
<div>
<label>姓名:</label>
<input type="text">
</div>
<div>
<label>请输入密码:</label>
<input type="text">
</div>
<div>
<label>请再次输入密码:</label>
<input type="text">
</div>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
#form div {
display: flex;
/* margin-top: 50px; */
/* height: 30px; */
align-items: flex-start;
flex: 0 0 30px;
}
#form div label {
flex: 0 0 140px;
text-align: left;
}
#form {
display: flex;
flex-direction: column;
}
</style>
查看全部 -
555555
查看全部 -
items
查看全部 -
flex换行
查看全部 -
主轴与交叉轴
查看全部 -
@media screen and <
查看全部 -
outline:none输入框焦点去掉
p:nth-child(2) 第二个p属性设置
查看全部
举报