Question

我正在学习flexbox，但似乎它在任何移动设备上都无法正常工作。第一张图片是桌面版本，第二张图片是移动版。所有只是收缩和包装不起作用。 flex设置：

.search-form {
    display: flex;
    flex-wrap: wrap;
}
input[type="search"] {
    flex: 2 0 250px;
}
button[type="submit"] {
    flex: 1 0 90px;
}

这是包含所有HTML和CSS的代码段。如何将其设置为在移动设备上运行？

＆＃13;

/*basic styles*/
html, body {
	margin: 0;
}
html {
	background: #88686A;
}
body {
	font: 100% Lato, Helvetica, sans-serif;
	background: white;
	width: 80%;
	margin: 0 auto;
	padding: 2%;
	line-height: 1.6;
}
article, aside, section, nav, figure, header, footer {
	display: block;
}
h1, h2, h3, h4 {
	font-weight: normal;
	font-family: LatoLight, Helvetica, sans-serif;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
	color: #575451;
	margin: 0;
	line-height: 1;
}
h1 {
	font-size: 2.6em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.8em;
	text-transform: uppercase;
}
h4 {
	font: 1.2em Lato, Helvetica, sans-serif;
	color: black;
}
p
 {
	margin: 0 0 1em;
}
a {
	color: #77A0B8;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
code {
	color: red;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>short forms</title>
<link href="_css/base.css" rel="stylesheet" type="text/css" media="screen">
<style>
	.search-form{
		width:80%;
		margin: 0 auto;
	}
input[type="search"] {
	box-sizing: border-box;
	background: #E9E9E9;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0.35em 0.75em;
	border: none;
	font-size: 1.1em;
	text-decoration: none;
	line-height: normal;
	max-height: 3em;
}
button[type="submit"] {
	box-sizing: border-box;
	border-radius: 0px 2px 2px 0px;
	background: #8B798C;
	font-weight: 300;
	text-transform: uppercase;
	color: white;
	padding: 0.35em 0.75em;
	border: none;
	font-size: 1.1em;
	text-decoration: none;
	cursor: pointer;	
	
}
button[type="submit"]:hover {
	background: #C17CCF;
}
/*flex it*/
.search-form {
	display: flex;
	flex-wrap: wrap;
}
input[type="search"] {
	flex: 2 0 250px;
}
button[type="submit"] {
	flex: 1 0 90px;
}
@media (max-width:450px){
	body{
		width: 100%;
		margin:0;
		padding: 1em 0 2em;
	}
	header {
		padding: 2% 5%;
	}
}
</style>
</head>
<body>
<header>
<h1>Creating Responsive Forms with Flexbox</h1>
<p><a href="http://www.w3.org/TR/css3-flexbox/" title="Flexbox">Flexible Layout Box Model</a>, better known as <strong>Flexbox</strong>, is a great tool for crafting responsive regions or UI elements. While not well-suited for complete page layouts, Flexbox excels at controlling elements along a single axis or in arranging elements within discreet regions. This makes Flexbox a fantastic tool for creating responsive page elements that are normally tricky to handle, such as forms. Often Flexbox can create responsive components with a minimal amount of code and little to no media queries.</p>
<h2>Short Forms</h2>
<p>Our first exercise will focus on the basic concepts of how Flexbox can help create responsive content. We'll start with a basic search form that consists of two elements, a search input and a submit button.</p>
</header>
<article class="example">
<form class="search-form">
  <input type="search" name="search" placeholder="Search this site" class="search-input">
  <button type="submit" class="search-btn">Search</button>
</form>
</article>
</body>
</html>

＆＃13;

Answer 1

请使用viewport元标记控制移动浏览器的布局，请在头部添加元标记：

<meta name="viewport" content="width=device-width">

所有移动div上都忽略了flexbox样式，但在桌面上可以使用

1 个答案: