Html Flexbox不在列中显示文本
我想在桌面版的主页上显示三篇文章，每篇文章都有自己的专栏。当我使用flexbox时，这应该很容易做到，正如我在一些教程中读到的那样 但是没有什么变化，这些文章仍然是一个接一个的。我尝试使用本教程： HTMLHtml Flexbox不在列中显示文本,html,css,flexbox,Html,Css,Flexbox,我想在桌面版的主页上显示三篇文章，每篇文章都有自己的专栏。当我使用flexbox时，这应该很容易做到，正如我在一些教程中读到的那样 但是没有什么变化，这些文章仍然是一个接一个的。我尝试使用本教程： HTML 零食 谢谢你的帮助 将显示：flex添加到@所有媒体中的主要内容（最小宽度：900px） 请参见下面的演示： /*CSS重置*/ html， 身体， 分区， 跨度 小程序， 对象 iframe， h1， h2， h3， h4， h5， h6， P 块引用， 之前， A. 缩
零食
谢谢你的帮助 将显示：flex
添加到@所有媒体中的主要内容（最小宽度：900px）
请参见下面的演示：
/*CSS重置*/
html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*站点包装器，使用flexbox*/
.包装纸{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
文本对齐：居中；
弹性：1100%；
最小高度：100%；
最小宽度：100%；
背景色：rgb（237237）；
位置：相对位置；
排名：0；
底部：100%；
左：0；
z指数：1；
填充：0em；
背景大小：200%；
}
梅因先生{
填充：1em；
弹性：1100%；
文本对齐：对齐；
背景：rgb（237237）；
顺序：3；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字号：18px；
线高：1.3；
}
.1-1{
垫面：1米；
左：5em；
右侧填充：5em；
垫底：1米；
页边顶部：0em；
弹性：1100%；
背景：rgb（224224224）；
顺序：2；
}
.2-2{
填充：10px；
页边顶部：0em；
弹性：1100%；
背景：rgb（55,60,57）；
顺序：1；
字体系列：影响，无衬线；
字体大小：50px；
颜色：白色；
}
/*导航菜单*/
.导航{
宽度：100%；
身高：100%；
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
z指数：0；
列表样式：无；
背景：rgb（35,36,35）；
}
/*在导航菜单中列出项目宽度*/
.导航项目{
宽度：200px；
边框顶部：1px实心rgb（73,70,70）；
边框底部：1px实心rgb（73,70,70）；
}
/*导航菜单链接的外观*/
.资产净值项目a{
显示：块；
填充：1em；
背景：rgb（35,36,35）；
颜色：白色；
字体大小：1.2米；
文字装饰：无；
过渡：背景0.5s；
}
/*使用光标悬停时更改链接的颜色*/
.导航项目a：悬停{
背景：黑色；
}
/*导航触发器*/
.导航触发器{
/*隐藏复选框输入*/
位置：绝对位置；
剪辑：rect（0,0,0,0）；
}
标签[for=“导航触发器”]{
/*关键定位风格*/
位置：固定；
左：15px；
顶部：15px；
z指数：2；
/*风格*/
高度：30px；
宽度：30px；
光标：指针；
背景图像：url（“数据：image/svg+xml；utf8，”）；
背景尺寸：包含；
}
.导航触发器+标签，
.包装纸{
过渡：左0.3s；
}
.导航触发器：选中+标签{
左：215px；
}
.nav触发器：选中~.wrapper{
左：200px；
}
.响应图像{
最大宽度：100%；
}
html，
身体{
身高：100%；
}
身体{
/*如果没有此选项，则在菜单打开时主体会有多余的水平滚动*/
溢出x：隐藏；
左边距：0px；
右边距：0px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：14px；
}
/*目录的样式*/
.内容{
列表样式类型：无；
文本对齐：居中；
字号：18px；
最大宽度：15em；
保证金：自动；
}
.李安{
显示：块；
填充：0.7em；
背景：rgb（35,36,35）；
/*斯普雷梅尼·巴沃·泰克斯塔，伊斯托·科特·奥扎杰*/
颜色：白色；
字号：1em；
文字装饰：无；
过渡：背景0.5s；
/*斯普雷梅尼·巴沃·博德贾，伊斯托·科特·奥扎杰*/
边框顶部：1px纯白；
边框底部：1px纯白；
边界半径：10px；
}
.内容a：悬停{
背景：黑色；
}
.个人资料图片{
边界半径：50%；
最大宽度：30%；
最高高度：30%；
浮动：左；
保证金：1em 1em 1em；
}
#社会img{
显示：内联块；
最大高度：50px；
最大宽度：50px；
保证金：1em 1em 1em；
浮动：左；
}
.主持人：之前{
内容：“；
显示：块；
高度：50px；
/*固定收割台高度*/
利润率：-50px0；
/*负固定收割台高度*/
}
.索引img{
最大宽度：70%；
边界半径：25px；
显示：块；
保证金：自动；
填充：10px；
}
.食谱{
列表样式：无；
}
/*片剂响应性*/
@介质和全部（最小宽度：700px）{
/*导航菜单-背景*/
.导航{
/*关键尺寸和位置样式*/
身高：6em；
z指数：2；
溢出：隐藏；
/*非关键外观样式*/
背景：rgb（55,60,57）；
}
/*导航菜单-列表项*/
.导航项目{
/*非关键外观样式*/
宽度：20%；
身高：6em；
边界顶部：无；
边框底部：无；
浮动：左；
}
.资产净值项目a{
/*非关键外观样式*/
宽度：自动；
身高：6em；
背景：rgb（55,60,57）；
字号：1em；
过渡：颜色0.2s，背景0.5s；
文本对齐：居中；
垫面：2.3em；
左边框：1px实心rgb（73,70,70）；
右边框：1px实心rgb（73,70,70）；
}
/*导航触发器*/
.导航触发器{
显示：无；
}
标签[for=“导航触发器”]{
/*临界定位
<!DOCTYPE html>
<html>
<head>
<title>Munchies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<nav>
<ul class="navigation">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="world.html">Around the globe</a></li>
<li class="nav-item"><a href="where.html">Where to eat?</a></li>
<li class="nav-item"><a href="recipes.html">Recipes</a></li>
<li class="nav-item"><a href="about.html">About me</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<div class="wrapper">
<div class="main-content">
<article>
<h3>Featured:</h3>
<h2 id="brussels">Brussels</h2>
<h3>Belgian Food</h3>
<p>
Traditional Belgian food is not for the faint hearted, with dishes such as bloedworst (black pudding made from pig's blood, served with apple sauce), breugel kop (chunks of beef and tongue set in gelatine) and paar de filet/steack de cheval (horse
steak). But there are more elegant spins on the local fare available: try La Maison du Cygne, which fuses Belgian and French cuisine and also offers glorious views of Brussels' gabled, gilded Grand Place.
</p>
</article>
<article>
<h3>Featured:</h3>
<h2>Real guacamole</h2>
<h3>Ingredients:</h3>
<ul class="recipe">
<li>4 mild chillies, finely chopped</li>
<li>bunch coriander, chopped</li>
<li>2 tomatoes, finely chopped</li>
<li>salt, to taste</li>
<li>1 onion, finely chopped</li>
<li>½ lime, juice only</li>
<li>3 ripe avocados</li>
</ul>
<h3>Directions:</h3>
<p>
In a pestle and mortar, pound the chillies, coriander, tomatoes, salt and onion to a fine paste.
</p>
<p>
Add a little water and lime juice to make a looser mixture. Mash in the avocados. Serve.
</p>
</article>
<article>
<h3>Featured:</h3>
<h2 id="belgium">Belgium</h2>
<h3>Waffles</h3>
<p>
Belgian waffles (gauffres) are internationally known, but in Belgium there are two different types: the Brussels waffle and the Liège waffle. The Brussels waffle is rectangular, golden brown on the outside, dusted with powdered/icing sugar and then
sometimes covered with syrup, slices of fruit, chocolate spread and whipped cream - all of which is deemed a mite inauthentic by waffle connoisseurs! The denser textured Liege waffle is square and has burnt sugar on the outside. They are sold
by street vendors and gourmet restaurants alike, all over Belgium.
</p>
</article>
</div>
<aside class="aside aside-2">
MUNCHIES
</aside>
</div>
</body>
</html>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Site wrapper, using flexbox*/
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
flex: 1 100%;
min-height: 100%;
min-width: 100%;
background-color: rgb(237, 237, 237);
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 0em;
background-size: 200%;
}
.main {
padding: 1em;
flex: 1 100%;
text-align: justify;
background: rgb(237, 237, 237);
order: 3;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.3;
}
.aside-1 {
padding-top: 1em;
padding-left: 5em;
padding-right: 5em;
padding-bottom: 1em;
margin-top: 0em;
flex: 1 100%;
background: rgb(224, 224, 224);
order: 2;
}
.aside-2 {
padding: 10px;
margin-top: 0em;
flex: 1 100%;
background: rgb(55, 60, 57);
order: 1;
font-family: Impact, sans-serif;
font-size: 50px;
color: white;
}
/*Navigation menu*/
.navigation {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
list-style: none;
background: rgb(35, 36, 35);
}
/*List items width in navigation menu*/
.nav-item {
width: 200px;
border-top: 1px solid rgb(73, 70, 70);
border-bottom: 1px solid rgb(73, 70, 70);
}
/*Appearance for navigation menu links*/
.nav-item a {
display: block;
padding: 1em;
background: rgb(35, 36, 35);
color: white;
font-size: 1.2em;
text-decoration: none;
transition: background 0.5s;
}
/*Changing the color of the link when hovering over with the cursor*/
.nav-item a:hover {
background: black;
}
/*Navigation trigger*/
.nav-trigger {
/*hide the checkbox input*/
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/*critical positioning styles */
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
/*styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger+label, .wrapper {
transition: left 0.3s;
}
.nav-trigger:checked+label {
left: 215px;
}
.nav-trigger:checked~.wrapper {
left: 200px;
}
.responsive-image {
max-width: 100%;
}
html, body {
height: 100%;
}
body {
/*Without this, the body has excess horizontal scroll when the menu is open*/
overflow-x: hidden;
margin-left: 0px;
margin-right: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 15em;
margin: auto;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(35, 36, 35);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid white;
border-bottom: 1px solid white;
border-radius: 10px;
}
.content a:hover {
background: black;
}
.profile-pic {
border-radius: 50%;
max-width: 30%;
max-height: 30%;
float: left;
margin: 1em 1em 1em 1em;
}
#social img {
display: inline-block;
max-height: 50px;
max-width: 50px;
margin: 1em 1em 1em 1em;
float: left;
}
.anchor:before {
content: "";
display: block;
height: 50px;
/* fixed header height*/
margin: -50px 0 0;
/* negative fixed header height */
}
.index-img {
max-width: 70%;
border-radius: 25px;
display: block;
margin: auto;
padding: 10px;
}
.recipe {
list-style: none;
}
/*Tablets responsive*/
@media all and (min-width: 700px) {
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 6em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 20%;
height: 6em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 6em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
text-align: center;
padding-top: 2.3em;
border-left: 1px solid rgb(73, 70, 70);
border-right: 1px solid rgb(73, 70, 70);
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
.main {
padding: 10px;
flex: 1 100%;
}
.recipe {
}
.aside-1 {
padding: 10px;
flex: 1 100%;
font-size: 18px;
/*position: fixed;*/
height: 100%;
}
.aside-2 {
background: red;
margin-top: 1.5em;
flex: 0 0 100%;
}
body {
margin-top: 0em;
}
.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
/*SPREMENI BARVO TEKSTA, ISTO KOT OZADJE*/
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
/*SPREMENI BARVO BORDERJA, ISTO KOT OZADJE*/
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.index-img {
max-width: 50%;
}
}
/*Desktop responsive*/
@media all and (min-width: 900px) {
/* Navigation Menu - Background */
.navigation {
/* critical sizing and position styles */
height: 3em;
z-index: 2;
overflow: hidden;
/* non-critical appearance styles */
background: rgb(55, 60, 57);
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: auto;
height: 3em;
border-top: none;
border-bottom: none;
float: left;
}
.nav-item a {
/* non-critical appearance styles */
width: auto;
height: 3em;
background: rgb(55, 60, 57);
font-size: 1em;
transition: color 0.2s, background 0.5s;
padding: 1em;
}
/* Nav Trigger */
.nav-trigger {
display: none;
}
label[for="nav-trigger"] {
/* critical positioning styles */
display: none;
}
.nav-trigger+label, .wrapper {
transition: none;
}
.nav-trigger:checked+label {
left: 0;
}
.nav-trigger:checked~.wrapper {
left: 0px;
}
.main {
padding: 10px;
flex: 1 60%;
}
.aside-1 {
padding: 10px;
font-size: 18px;
flex: 0 0 200px;
height: auto;
}
.aside-2 {
background: white;
margin-top: 0;
color: black;
flex: 0 0 100%;
}
body {
margin-top: 3em;
}
/*.responsive-image {
margin: auto;
padding: 20px;
display: block;
width: 40%;
}*/
/*Styles for table of content*/
.content {
list-style-type: none;
text-align: center;
font-size: 18px;
max-width: 10em;
/*margin-top: 6em;*
/*position: fixed;
left: 4em;*/
padding: 1em;
}
.content li a {
display: block;
padding: 0.7em;
background: rgb(55, 60, 57);
color: white;
font-size: 1em;
text-decoration: none;
transition: background 0.5s;
border-top: 1px solid rgb(237, 237, 237);
border-bottom: 1px solid rgb(237, 237, 237);
}
.index-img {
max-width: 31%;
display: block;
margin: auto;
}
.recipe {
}
.content-wrapper{
position: fixed;
}
.main-content{
order: 2;
}
.main-content > article {
width: 30%;
padding: 10px;
order: 2;
}
}