Question

我正试图垂直定位距离＆＃34;和＆＃34;持续时间＆＃34;使用flexbox在各自div的中心文本，我似乎无法让它工作。我也会将此应用于＆＃34;卡路里＆＃34;和＆＃34;分享＆＃34;文本以及。

我也想使用flexbox在中间列中垂直均匀地间隔我的4x链接。

enter image description here

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Runna - Track your run!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/js.js"></script>
</head>
<body>
    <div id="main-wrapper">

        <div id="head-bar">
            <img class="logo" src="imgs/logo-blue.png">
        </div>
        <div id="map-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
        </div>
        <div id="control-container">
            <div class="left-col">
                <div class="distance-wrapper">
                    <div class="distance-title bold-title">DISTANCE:</div>
                    <div class="distance-figure">1.7KM</div>
                </div>  

                <div class="duration-wrapper">
                    <div class="duration-title bold-title">DURATION</div>
                    <div class="duration-figure">10.42MINS</div>
                </div>      
            </div> <!-- End of left col -->
                <div class="middle-col">
                    <ul>
                        <li class="arrow"><a href="#" class="arrowbutton"><i class="fa fa-chevron-down"></i></a></li>

                        <li><a href="#">START</a></li>
                        <li><a href="#">STOP</a></li>
                        <li><a href="#">PAUSE</a></li>
                    </ul>

                </div>


            <div class="right-col">
                <div class="calorie-wrapper">
                    <div class="calories bold-title">CALORIES</div>
                    <div class="calories-result">100 cal's</div>
                </div>
                <div class="share-wrapper">
                    <div class="share bold-title">SHARE</div>
                    <div class="share-icons">FB or Twitter</div>
                </div>

            </div> <!-- End of right col -->

        </div>

    </div>
</body>
</html>

CSS：

html {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    height: 100%;
    font-family: 'Lato', sans-serif;
}

#main-wrapper {
    height: 100vh;
}

@media all and (max-width: 40em) {
    #head-bar {
        background: black;
        width: 100%;
        height: 5vh;


    }

    .logo {

        display: block;
        margin: 0 auto;
        height: 85%;

    }

    #map-container {
        background: yellow;
        height: 65vh;
        width: 100%;
    }
}

/***Control columns***/
#control-container {
    width: 100%;
    height: 30vh;
    color: white;
    font-family: 'Lato', sans-serif;
    text-align: center;
    background: #1b1b1b;
    position: relative;



}
.left-col {
    display: flex;
    flex-direction: column;

    width: 33.3%;
    height: 100%;
    /*height: 60px;*/
    float: left;
}


.middle-col {
    background: #151515;
    width: 33.3%;
    height: 100%;
    float: left;
    /*box-shadow: 0 0 8px 2px #000;*/

}
.right-col {

    width: 33.3%;
    float: left;

}

.distance-wrapper, .duration-wrapper {
    flex: 1;
    /*background: #ddd;*/
    border-bottom: 1px solid yellow;
     justify-content: center;


}

.calorie-wrapper, .share-wrapper {
    display: block;
    width: 100%;

}

.bold-title {
    font-weight: 900;
    font-family: 'Lato', sans-serif;
}


/***Middle Navigation***/

.middle-col {

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

}

.middle-col ul {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;

}

.middle-col li {
    list-style-type: none;

}

.middle-col a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 20px;


}

.middle-col a:hover {
    background: green;
    display: block;

}

#control-container:after {
    content: "";
    display: block;
    height: 0;
  clear: both;
}

Answer 1

我用较少量的HTML创建了此示例，并且希望具有更大的语义含义。

让我们这样做：

Screenshot

HTML

Flex容器的<section> element
<nav>元素是行动的好容器。
description list element — <dl> - 是统计数据的好包装。他们有两个孩子：
- Description Term element — <dt> - 用于统计标题
- Description element — <dd> - 用于统计值

<section class="control-container">
  <dl class="distance">
    <dt>Distance</dt>
    <dd>1.7KM</dd>
  </dl>
  <dl class="duration">
    <dt>Duration</dt>
    <dd>10.42 Mins</dd>
  </dl>
  <dl class="calories">
    <dt>Calories</dt>
    <dd>100</dd>
  </dl>
  <nav class="actions">
    <a href="">Down</a>
    <a href="">Start</a>
    <a href="">Stop</a>
    <a href="">Pause</a>
  </nav>
  <div class="share">
    <h2>Share</h2>
    <a href="">Facebook</a>
    <a href="">Twitter</a>
  </div>
</section>

Flex

flex <section>容器包含display: flex和flex-flow: column wrap，因此其子项将按列布局并在向外推送时换行。
Flex项目也会被display: flex，flex-flow: column wrap和justify-content: center;提供，以便文字垂直居中。导航被赋予flex-direction: row，以便其链接可以align-items: center
占据一半高度的4个部分flex: 1 1 50%;它们每个都会达到柱高的一半
导航是flex: 1 1 100%，因此它将自行占据整个列

.control-container {
  display: flex;
  flex-flow: column wrap;
}
.control-container > * {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  flex: 1 1 50%;
  width: 33.33%;
  text-align: center;
}
.control-container > nav {
  flex-direction: row;
  align-items: center;
  flex: 1 1 100%;
}
.control-container > nav a {
  flex: 1 1 100%;
}

完整示例

＆＃13;

* {
  margin: 0;
  padding: 0;
  font: 100% arial;
}
.control-container {
  display: flex;
  flex-flow: column wrap;
  height: 40vh;
  min-height: 250px;
  min-width: 300px;
  margin: 0 auto;
}
.control-container > * { /* target all direct children */
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  flex: 1 1 50%;
  width: 33.33%;
  text-align: center;
  background: #333;
  color: #FFF;
}
.control-container > nav {
  flex-direction: row;  /* allows vertical centering with align-items: center; */
  align-items: center;
  flex: 1 1 100%;  /* take up entire column */
  background: #000;
}
.control-container > nav a {
  flex: 1 1 100%;  /* 100% pushes each link so they wrap  */
}
/*Change the order of the flex items so the stats can be kept together in the HTML*/
.distance,
.duration,
.actions {
  order: 1;
}
.calories {
  order: 3;
}
.share {
  order: 4;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.control-container dt,
.control-container h2 {
  font-weight: bold;
}
.share h2 {
  margin-top: calc(1em + 15px);  /*push "share" down so it aligns with "duration" 1em accounts for the extra line of text */
}
.control-container a {
  color: #FFF;
  text-decoration: none;
}
dt,
dd,
.share * {
  padding: 5px;
}
iframe {
  width: 100%;
  height: calc(60vh - 104px);
  /*  viewport height minus flex container height and header height ( + there is a stray 4px somewhere)*/
  min-height: 300px;
}
header {
  height: 100px;
  text-align: center;
  background: #000;
}

＆＃13;

<div class="wrapper">
  <header>
    <img src="http://www.placehold.it/100" />
  </header>
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>

  <section class="control-container">

    <dl class="distance">
      <dt>Distance</dt>
      <dd>1.7KM</dd>
    </dl>

    <dl class="duration">
      <dt>Duration</dt>
      <dd>10.42 Mins</dd>
    </dl>

    <dl class="calories">
      <dt>Calories</dt>
      <dd>100</dd>
    </dl>

    <nav class="actions">
      <a href="">Down</a>
      <a href="">Start</a>
      <a href="">Stop</a>
      <a href="">Pause</a>
    </nav>


    <div class="share">
      <h2>Share</h2>
      <a href="">Facebook</a>
      <a href="">Twitter</a>
    </div>

  </section>
</div>

＆＃13;

Answer 2

所以我最终解决了这个问题，我没有意识到如果你已经将它们添加到主容器中，你可以再次添加display: flex和flex-direction: column;等属性。无论如何，我将以下代码添加到我的包装器中并且它可以工作：

.distance-wrapper, .duration-wrapper {
    flex: 1;
    border-bottom: 1px solid yellow;
    display: flex; // Important
    flex-direction: column; // Important
    align-items: center;// Important
    justify-content: center; // Important
}

如何使用flexbox垂直定位2x div

2 个答案:

HTML

Flex

完整示例