以固定宽度为中心的CSS柔性盒

我试图用柔性盒和固定宽度居中包装。当我像100％一样为身体添加固定宽度并使用边距：0 auto;一切都被抛弃了中心。我希望包装具有1000px的固定宽度并居中在正文中（这就是为什么我要将主体设置为100％）。以固定宽度为中心的CSS柔性盒

任何帮助表示赞赏。下面的HTML和CSS。

HTML：

<!doctype html> 
<html lang="eng"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Flex box layout</title> 

    <link rel="stylesheet" href="webtemp.css" /> 
</head> 

<body> 

    <div class="wrapper"> 
    <header class="header">Header</header> 
    <article class="main"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    </article> 
    <aside class="aside aside-1">Aside 1</aside> 
    <aside class="aside aside-2">Aside 2</aside> 
    <footer class="footer">Footer</footer> 
</div> 
</body> 


</html>

CSS：

.wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    font-weight: bold; 
    text-align: center; 
} 

.wrapper > * { 
    padding: 10px; 
    flex: 1 100%; 
} 

.header { 
    background: tomato; 
} 

.footer { 
    background: lightgreen; 
} 

.main { 
    text-align: left; 
    background: deepskyblue; 
} 

.aside-1 { 
    background: gold; 
} 

.aside-2 { 
    background: hotpink; 
} 

@media all and (min-width: 600px) { 
    .aside { 
    flex: 1 auto; 
    } 
} 
@media all and (min-width: 800px) { 
    .main { 
    flex: 3 0px; 
    } 

    .aside-1 { 
    order: 1; 
    } 

    .main { 
    order: 2; 
    } 

    .aside-2 { 
    order: 3; 
    } 

    .footer { 
    order: 4; 
    } 
} 
body { 
    padding: 2em; 
}

来源

2015-05-27 DBS

以显示你的问题最好的方式，代码片段工具 – khurram

应用固定宽度并使用margin:0px auto;来对齐中心。

.wrapper { 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
-webkit-flex-flow: row wrap; 
flex-flow: row wrap; 
font-weight: bold; 
text-align: center; 
width:300px; 
margin:0px auto; 
}

DEMO

来源

2015-05-27 06:29:04

我本来应该更具体，我是想在身体层面中心，然后设置.wrapper的宽度。我采用了这个解决方案，因为这可以解决我的问题。谢谢！！ – DBS

刚刚成立的.wrapper宽度1000px;

.wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width:1000px; 
 
} 
 

 
.wrapper > * { 
 
    padding: 10px; 
 
    flex: 1 100%; 
 
} 
 

 
.header { 
 
    background: tomato; 
 
} 
 

 
.footer { 
 
    background: lightgreen; 
 
} 
 

 
.main { 
 
    text-align: left; 
 
    background: deepskyblue; 
 
} 
 

 
.aside-1 { 
 
    background: gold; 
 
} 
 

 
.aside-2 { 
 
    background: hotpink; 
 
} 
 

 
@media all and (min-width: 600px) { 
 
    .aside { 
 
    flex: 1 auto; 
 
    } 
 
} 
 
@media all and (min-width: 800px) { 
 
    .main { 
 
    flex: 3 0px; 
 
    } 
 

 
    .aside-1 { 
 
    order: 1; 
 
    } 
 

 
    .main { 
 
    order: 2; 
 
    } 
 

 
    .aside-2 { 
 
    order: 3; 
 
    } 
 

 
    .footer { 
 
    order: 4; 
 
    } 
 
} 
 
body { 
 
    padding: 2em; 
 
}

<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <article class="main"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    </article> 
 
    <aside class="aside aside-1">Aside 1</aside> 
 
    <aside class="aside aside-2">Aside 2</aside> 
 
    <footer class="footer">Footer</footer> 
 
</div>

强调文本

来源

2015-05-27 06:24:50 khurram

以固定宽度为中心的CSS柔性盒

回答

相关问题