Revision as of 05:51, 24 July 2020

<!DOCTYPE html>

The flex-wrap Property

The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:

1

2

3

4

5

6

7

8

9

10

11

12

Try resizing the browser window.

@@ Line 1: / Line 1: @@
 <!DOCTYPE html>
 <html>
-<title>W3.CSS</title>
+<head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
-<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+.flex-container {
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  display: flex;
+  flex-wrap: wrap;
+  background-color: DodgerBlue;
+}
+.flex-container > div {
+  background-color: #f1f1f1;
+  width: 100px;
+  margin: 10px;
+  text-align: center;
+  line-height: 75px;
+  font-size: 30px;
+}
+</style>
+</head>
 <body>
+<h1>The flex-wrap Property</h1>
-<div class="w3-container">
+<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>
-   <h1>Spinning Elements</h1>
-   <p>Use the w3-spin class to spin an element 360 degrees:</p>
+<div class="flex-container">
-   <p><i class="fa fa-spinner w3-spin" style="font-size:64px"></i></p>
+   <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+   <div>7</div>
+  <div>8</div>
+  <div>9</div>
+   <div>10</div>
+  <div>11</div>
+  <div>12</div>
 </div>
+<p>Try resizing the browser window.</p>
 </body>
 </html>