/ / Versuchen, ein Bild in einem Flex-Element mit flexbox zu zentrieren. Was ist denn hier los? - CSS, CSS3, Flexbox

Versuchen, ein Bild in einem Flex-Element mit flexbox zu zentrieren. Was ist denn hier los? - CSS, CSS3, Flexbox

Ich versuche ein Bild im Fixed zu zentrieren nav Menü eines Flex-Artikels. Ich habe versucht, die justify-content: center; Befehl, aber ich denke nicht, dass es irgendetwas getan hat.

Unten ist das CSS und abgekürzt HTML. Codepen: http://codepen.io/anon/pen/XmQQgb

CSS:

body {
padding:0;
margin:0
}

.wrapper {
display: flex;
}

nav {
flex: 0 0 300px;
background: gray;
}
.nav-wrapper {
position: fixed;
top: 0; left: 0;
}

section {
flex: 1 1;
padding: 20px;
}

.navImage {
display: block;
margin: 0 auto;
}

HTML

<div class="wrapper">
<nav role="navigation">
<div class="nav-wrapper">
<img class="navImage" width="100" height="100" src="/images/https://upload.wikimedia.org/wikipedia/commons/5/56/Run.svg">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<blockquote><i>Please, make me fixed!</i></blockquote>
</div>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
</section>
</div>

Antworten:

2 für die Antwort № 1

Die Breite deines nav Element ist 300px.

nav {
flex: 0 0 300px;
background: gray;
}

Die Breite deines .nav-wrapper Element (das Kind von nav) ist nicht definiert.

.nav-wrapper {
position: fixed;
top: 0;
left: 0;
}

weil .nav-wrapper hat position: fixed es ist aus dem genommen normaler Fluss des Dokuments und hat eine Standardbreite von 0, die nur so weit erweitert wird, dass Inhalt umschlossen wird.

Wie die Breite von .nav-wrapper ist auf die Breite des Inhalts beschränkt, erfolgt die Zentrierung innerhalb dieses begrenzten Raumes. Wenn Sie einen Rahmen hinzufügen .nav-wrapperDu wirst sehen, dass das Bild tatsächlich perfekt zentriert ist ... innerhalb der verfügbaren Breite.

DEMO

Um das Bild über die gesamte Breite des Bildes zu zentrieren nav Spalte, für die Sie eine Breite angeben könnten .nav-wrapper gleich der Breite von nav.

Versuche dies:

.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 300px; /* new */
}

Also im Wesentlichen warst du fast da. Du brauchst nur eine weitere Codezeile.

DEMO


Adressierung der justify-content Problem...

Definieren der Flex-Elemente

Sie haben den äußeren Container (.wrapper) zu display: flex, was es zu einem macht Flexbehälter.

Dies konvertiert die untergeordneten Elemente von .wrapper in Flex-Artikel. Mit anderen Worten, nav und section zu flexiblen Gegenständen werden.

Beachten Sie, dass die Nachkommen eines Flex-Containers über die Kinder hinaus sind nicht Flex-Elemente und Flex-Eigenschaften gelten nicht für sie. Daher wird jeder Flex-Code hinzugefügt .nav-wrapper oder .navImage würde ignoriert werden, es sei denn, ihre Eltern wurden Flex-Container.

rechtfertigen-Inhalt

Das justify-content Aus folgenden Gründen funktioniert die Property in Ihrem aktuellen Code nicht:

  1. Das img Element ist kein Flex-Element (wie oben beschrieben), so dass die Flex-Eigenschaften nicht darauf zutreffen.

  2. Selbst wenn du das machst img Elternteil (.nav-wrapper) in einen Flexbehälter, justify-content ist vielleicht keine gute Lösung, weil img hat zwei Geschwister: ul und blockquoteund alle drei würden mit zentriert sein justify-content.

  3. Wenn du es machen willst img (und seine Geschwister) Flex-Elemente, dann kann es effizienter sein, einen Flex-Container in Spaltenrichtung und nicht in Zeilenrichtung zu verwenden. In diesem Fall würden Sie nicht verwenden justify-content zur horizontalen Zentrierung. Sie müssten verwenden align-items oder align-self. Erfahren Sie mehr über die Eigenschaften Hauptachse, Querachse und Ausrichtung.