Flexbox 실습

HTML

  <div class="container">
    <form>
      <div class="form-row">
        <label for="name">Name:</label>
        <input type="text" id="name">
      </div>
      <div class="form-row">
        <label for="favColor">Favorite Color:</label>
        <input type="text" id="favColor">
      </div>
    </form>
  </div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

input {
  font-size: 14px;
  font-family: Helvetica, sans-serif;
}

body {
  background-color: #BBB;
  font-family: Helvetica, sans-serif;
  padding-bottom: 100px;
}

h2, h3 {
  margin: 0 0 .75em 0;
}

/* first example */
.container {
  max-width: 750px;
  margin: 20px auto 0 auto;
  padding: 30px;
  background-color: #FFF;
}

1. flex: 1;

.form-row {
  padding: 10px 0;
  display: ?;
}

.form-row label {
  padding-right: 10px;
}

.form-row input {
  flex: ?;
}

2. 추가 html , css

HTML

<!-- second example -->
<div class="column-layout">
  <div class="main-column">
    <h2>Main Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis debitis omnis fugiat libero pariatur amet laudantium minima consectetur tenetur. Repudiandae, autem, voluptate modi deleniti sequi voluptatum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi earum fugit veniam amet quae sint vitae numquam dolore sunt quod a odio officia voluptate doloribus, at. Cum quasi mollitia eaque. Voluptatibus soluta, consequuntur, reiciendis debitis omnis fugiat libero pariatur amet laudantium.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatibus soluta, consequuntur, reiciendis debitis omnis fugiat libero pariatur amet laudantium minima consectetur tenetur. Repudiandae, autem, voluptate modi deleniti sequi voluptatum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi earum fugit veniam amet quae sint vitae numquam dolore sunt quod a odio officia voluptate doloribus, at. Cum quasi mollitia eaque.</p>
  </div>

  <div class="sidebar-one">
    <h3>Sidebar One</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum modi nisi tenetur sint dignissimos nulla, blanditiis nesciunt.</p>
  </div>

  <div class="sidebar-two">
    <h3>Sidebar Two</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum modi nisi tenetur sint dignissimos nulla, blanditiis nesciunt.</p>
  </div>
</div>

CSS

/* second example */
.column-layout {
  max-width: 1300px;
  background-color: #FFF;
  margin: 40px auto 0 auto;
  line-height: 1.65;
  padding: 20px 50px;
  display: flex;
}

.main-column {
  flex: ?;
  order: ?;
}

.sidebar-one {
  flex: ?;
  order: ?;
}

.sidebar-two {
  flex: ?;
  order: ?;
}

3. 추가 html , css

<!-- third example -->
<div class="call-outs-container">
  <div class="call-out">
    <h4>Feature 1</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam obcaecati vel, placeat numquam omnis sit consectetur nobis molestias! Explicabo deserunt. Consectetur adipisicing elit. Quibusdam obcaecati vel, placeat numquam placeat numquam omnis sit consectetur.</p>
  </div>

  <div class="call-out">
    <h4>Feature 2</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam obcaecati vel, placeat numquam omnis sit consectetur nobis molestias! Explicabo deserunt placeat numquam omnis.</p>
  </div>

  <div class="call-out">
    <h4>Feature 3</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam obcaecati vel, placeat numquam omnis sit.</p>
  </div>
</div>

/* third example */
.call-outs-container {
  max-width: 1400px;
  margin: 40px auto 0 auto;
  display: flex;
  justify-content: space-between;
}

.call-out {
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
  flex-basis: 30%;
}

@media (min-width: 900px) {
  .call-outs-container {
  /* 화면 사이즈 900 이상만 flex가 적용되도록 */
  /* 컨테이너에서 flex와 가로정렬을 제거하고 여기에 적용한다 */
  }
}

.call-out:nth-child(1) {background-color: #c0dbe2;}
.call-out:nth-child(2) {background-color: #cdf1c3;}
.call-out:nth-child(3) {background-color: #ccb9da;}

4. 추가 html , css

  <!-- fourth example -->
  <div class="fixed-size-container">
    <div class="fixed-size">1</div>
    <div class="fixed-size">2</div>
    <div class="fixed-size">3</div>
    <div class="fixed-size">4</div>
    <div class="fixed-size">5</div>
  </div>

/* fourth example */
.fixed-size-container {
  max-width: 1400px;
  margin: 40px auto 0 auto;
  background-color: #FFF;
  padding-top: 50px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
 /* 사각형들이 화면이 줄어들면 아래로 내려갈수 있도록 */
}

.fixed-size {
  width: 150px;
  height: 100px;
  background-color: #990b47;
  color: #FFF;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 60px;
  margin-bottom: 20px;
}

5. 추가 html , css

  <!-- fifth example -->
  <div class="banner">
    <div class="center-me">Center</div>
  </div>

/* fifth example */
.banner {
  height: 400px;
  max-width: 700px;
  margin: 40px auto 40px auto;
  background-color: #2a2a2a;
  /* Center 글자를 사각형 정 중앙에 오도록 한다. */
}

.center-me {
  color: #FFF;
  font-size: 50px;
  margin: auto;
}

6. 추가 html , css

  <!-- sixth example -->
  <div class="equal-height-container">
    <div class="first">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quasi similique amet voluptatem molestiae
        nostrum ab nesciunt blanditiis repellendus quos, sequi sunt, dolorem quis facilis mollitia nemo modi doloribus
        quo.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic
        quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error
        reiciendis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quasi similique amet voluptatem molestiae
        nostrum ab nesciunt blanditiis repellendus quos, sequi sunt, dolorem quis facilis mollitia nemo modi doloribus
        quo.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam, veritatis ducimus, vero magnam hic
        quia pariatur asperiores laudantium quod nobis perspiciatis, expedita quo reprehenderit quasi iusto ullam error
        reiciendis.</p>
    </div>

    <div class="second">
      <div class="second-a">A</div>
      <div class="second-b">B</div>
    </div>
  </div>

/* sixth example */
.equal-height-container {
  max-width: 900px;
  margin: 0 auto;
  display: ?;
}

.first {
  background-color: #FFF;
  padding: 20px;
  flex: ?;
}

.second {
  background-color: yellow;
  flex: ?;
  display: ?;
  flex-direction: column;
}

.second-a {
  background-color: #c0dbe2;
  flex: ?;
}

.second-b {
  background-color: #cdf1c3;
  flex: ?;
}