css-flex 经典面试题

最新推荐文章于 2024-05-14 05:05:23 发布

Masisol

最新推荐文章于 2024-05-14 05:05:23 发布

阅读量3.9k

点赞数 4

分类专栏：零碎知识学习笔记文章标签： css flex面试题

本文链接：https://blog.csdn.net/baidu_33279139/article/details/99300750

版权

零碎知识学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css-flex 属性学习

flex-direction：排列方向。 row | column | row-reserve | column-reserve

flex-wrap: 是否换行。 wrap | nowrap | wrap-reserve

flex-flow：flex-direction&&flex-wrap简写模式。默认值为：row nowrap。

justify-content：定义了主轴的对其方式。 flex-start | flex-end | center | space-between | space-around;

align-item：交叉轴上如何对齐。flex-start | flex-end | center | baseline | stretch;

css-flex 面试题

内容宽度等分

<html>
<head>
<style type="text/css">
.main{
	width:100%;
    display:flex;
    height:100%;
    
}
.main div{
	flex:1;
    height:100%;
    border:1px solid #333;
}
</style>
</head>

<body>

	<div class="main">
    	<div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

</body>

</html>

左右布局，一侧定宽一侧自适应填满

<html>
<head>
<style type="text/css">
.main{
	width:100%;
    display:flex;
    height:100%;
    
}
.left,.right{
	height:100%;
  	border:1px solid #333;
 	box-sizing:border-box;
}
.left{
	width:300px;

}
.right{
	width:100%;
}
</style>
</head>

<body>

	<div class="main">
    	<div class="left"></div>
        <div class="right"></div>
    </div>

</body>

</html>

未知高度上下左右居中

<html>
<head>
<style type="text/css">
.main{
	width:100%;
    display:flex;
    height:100%;
    justify-content:center;
    align-items:center;
    
}
.box{
    width:300px;
    border:1px solid #333;
}
</style>
</head>

<body>

	<div class="main">
    	<div class="box">未知高度上下左右居中</div>
    </div>

</body>

</html>

文字居中

<html>
<head>
<style type="text/css">
.main{
    height:100%;
    justify-content:center;
    align-items:center;
    
}
.box{
    display:flex;
    justify-content:center;
    align-items:center;
    width:300px;
    border:1px solid #333;
}
</style>
</head>

<body>

	<div class="main">
    	<div class="box">文字垂直居中</div>
    </div>

</body>

</html>

Masisol

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
css-flex 经典面试题

css-flex 属性学习flex-direction：排列方向。 row | column | row-reserve | column-reserveflex-wrap: 是否换行。 wrap | nowrap | wrap-reserveflex-flow：flex-direction&&flex-wrap简写模式。默认值为：row nowrap。justi...
复制链接

扫一扫