作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 flex 制作下面的布局:
我可以用 flex 做这个布局吗?
.objectref-use .page-header {
display: flex;
flex-direction: row;
}
.objectref-use .page-header .header-col {
flex: 1;
display: flex;
}
.objectref-use .page-header .header-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.objectref-use .page-header .header-content .together-content {
flex-wrap: nowrap;
}
.objectref-use .page-header .objectref-title {
margin-right: 8px;
}
.objectref-use .page-header .objectref-title.header-col {
justify-content: flex-start;
}
.objectref-use .page-header .objectref-title .header-content {
flex: 0 1 auto;
background: blue;
}
.objectref-use .page-header .objectref-timeline {
flex: 0 0 35px;
display: flex;
}
.objectref-use .page-header .objectref-timeline .header-content {
background: pink;
flex: 1 1 100%;
}
.objectref-use .page-header .objectref-menu.header-col {
justify-content: flex-end;
}
.objectref-use .page-header .objectref-menu .header-content {
flex: 0 1 auto;
background: green;
}
@media screen and (max-width: 768px) {
.page-header {
flex-direction: column;
}
.page-header .header-row {
flex-direction: row;
}
}
@media screen and (max-width: 480px) {
.page-header {
flex-direction: column;
}
.page-header .header-col {
flex: 1;
}
.page-header .objectef-timeline {
margin: 0;
}
}
<div class="objectref-use">
<div class="page-header">
<div class="header-col objectref-title">
<div class="header-content">
<h1>title here (can be loooong) [block 1]</h1>
<h6>text on next line</h6>
</div>
</div>
<div class="header-col objectref-timeline">
<div class="header-content">timeline [block 3]</div>
</div>
<div class="header-col objectref-menu">
<div class="header-content">
<div class="together-content">
few button groups here [block 2]
</div>
<h6>text on next line</h6>
</div>
</div>
</div>
</div>
这是 the current CSS on Codepen .谢谢。
最佳答案
是的,您可以更改 order of flex elements使用 css order
属性。
此外,您可以通过调整 flex
值来更改 flex 元素的宽度,将某些元素堆叠在一起等。
看看这个 guide for more information .
ul {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
margin-bottom: 25px;
}
li {
background: lightblue;
text-align: center;
flex: 0 1 50%;
list-style: none;
}
.one {
background: green;
-webkit-order: 2;
order: 2;
}
.two {
background: olive;
-webkit-order: 3;
order: 3;
}
.three {
-webkit-order: 1;
order: 1;
flex: 1 0 100%;
}
.four, .five, .six {
border: 1px solid red;
flex: 1;
}
.seven, .eight, .nine {
border-bottom: 1px solid white;
flex: none;
display: block;
width: 100%;
}
<ul>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
</ul>
<ul>
<li class="four">1</li>
<li class="five">2</li>
<li class="six">3</li>
</ul>
<ul>
<li class="seven">1</li>
<li class="eight">2</li>
<li class="nine">3</li>
</ul>
关于html - 重新安排移动和桌面的 flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38342532/
我是一名优秀的程序员,十分优秀!