关于flex布局

以下为个人理解，老师请指点

flex弹性盒子是用于位置的编写，padding和margin是用于元素间的距离，position用于固定位置及覆盖

比如设计图中的导航栏，logo及nav左右两边的距离是固定的，此时用flex布局中的space-around去编写位置，是不能再用padding或者margin去编写固定的左右距离的是么？

<!DOCTYPE html>

<html>

<head>

<style>

.top{

width: 100%;

height: 100px;

background-color: burlywood;

}

.wrap{

width: 1200px;

height: 100%;

background-color: cornflowerblue;

margin: 0 auto;

display: flex;

justify-content: space-around;

align-items: center;

}

.logo{

width: 200px;

height: 100px;

background-color: aquamarine;

}

.list{

width: 200px;

height: 100px;

background-color: antiquewhite;

}

</style>

</head>

<body>

</div>

</body>

</html>

关于高度和内容撑满问题

高度继承问题麻烦老师在讲述一下，看完课程感觉有点蒙了，不太理解

内容撑满高度和自己设置高度问题，是元素本身的高度及设置padding或者margin去填充的高度吗？

据说真的有神 2019-09-16

源自：移动Web开发入门 3-16 flex布局-实例

收起

3回答

好帮手慕言 2019-09-16 19:13:22

同学你好，是可以的，但是要通过计算得出使用弹性盒模型之后，左边距是多少，然后设置margin值。

如果同学想要设置左边距为25px，那么直接给logo设置左浮动，设置margin-left值，这样会更方便哦。

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

提问者据说真的有神 2019-09-16 17:22:04

就是这样的样式，如果左边距和右边距的距离是固定的，比如是25px，用弹性盒子写完是自动分配的，还可以用margin和padding去处理成25px吗？

收起回答

好帮手慕言 2019-09-16 17:09:38

同学你好，

1、padding是给元素设置内边距属性（会撑开元素的宽高）。

例子：

页面效果：

2、margin可以设置元素之间的间距。

例子：

页面效果：

3、position是对元素进行定位。（绝对定位和固定定位脱离文档流，因此可能会覆盖元素）

例子：

页面效果（灰色背景的元素被覆盖在红色元素之下）：

4、logo可以再设置边距（同学的代码中没有找到nav元素哦），

5、关于高度的问题。高度继承

父元素设置了高度，子元素设置高度为100%，那么子元素的高度和父元素的高度一致。

例子：

页面效果：

6、如果元素不设置高度，那么是由内容撑开的。

例子：

页面效果：

自己设置高度：

padding可以撑开内容的宽高，但是margin是不可以的。

同学可以结合例子再理解下。

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

提问者据说真的有神 #1

谢谢老师的回答关于flex布局，在logo和nav那块我只是举了个例子，没有表达清楚，让老师误解了，按照图片，左边红色线条是logo的左边距，右边红色线条是nav的右边距我想问下，如果用弹性盒子去写，还可以用padding或者margin设置距离左右两边的距离吗？

2019-09-16 17:18:53