/ / Próba wyśrodkowania obrazu w elemencie flex za pomocą Flexbox. Co tu się dzieje? - css, css3, flexbox

Próbujesz wyśrodkować obraz w elemencie flex za pomocą Flexbox. Co tu się dzieje? - css, css3, flexbox

Próbuję wyśrodkować obraz w ustalonym miejscu nav menu elementu flex. Próbowałem używać justify-content: center; dowództwo, ale nie sądzę, żeby to miało cokolwiek.

Poniżej znajduje się CSS i skrócony kod 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>

Odpowiedzi:

2 dla odpowiedzi № 1

Szerokość twojego nav element to 300 pikseli.

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

Szerokość twojego .nav-wrapper element (dziecko nav) jest niezdefiniowany.

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

Bo .nav-wrapper ma position: fixed jest on wyjęty z normalny przepływ dokumentu i ma domyślną szerokość równą 0, która rozwinie się tylko na tyle, aby zawinąć zawartość.

Jako szerokość .nav-wrapper ogranicza się do szerokości treści, centrowanie odbywa się w ramach ograniczonej przestrzeni. Jeśli dodasz obramowanie .nav-wrapperzobaczysz, że obraz jest idealnie idealnie wycentrowany ... w dostępnej szerokości.

PRÓBNY

Aby wyśrodkować obraz wzdłuż całej szerokości nav kolumna, możesz określić szerokość dla .nav-wrapper równy szerokości nav.

Spróbuj tego:

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

Więc w zasadzie prawie tam byłeś. Potrzebowałeś jeszcze jednego wiersza kodu.

PRÓBNY


Adresowanie justify-content kwestia...

Definiowanie elementów Flex

Ustawiłeś zewnętrzny pojemnik (.wrapper) do display: flex, co sprawia, że ​​jest elastyczny pojemnik.

To konwertuje elementy potomne .wrapper w elementy elastyczne. Innymi słowy, nav i section stać się elastycznymi przedmiotami.

Zauważ, że potomkowie elastycznego pojemnika poza dziećmi są nie elementy flex i właściwości flex nie mają do nich zastosowania, stąd każdy kod flex dodawany do .nav-wrapper lub .navImage będą ignorowane, chyba że ich rodzice staną się elastycznymi pojemnikami.

uzasadnić-treść

The justify-content Właściwość nie działa w twoim bieżącym kodzie z następujących powodów:

  1. The img element nie jest elementem flex (jak opisano powyżej), więc właściwości flex nie zostaną do niego zastosowane.

  2. Nawet jeśli stworzysz img rodzic (.nav-wrapper) w elastyczny pojemnik, justify-content może nie być dobrym rozwiązaniem, ponieważ img ma dwoje rodzeństwa: ul i blockquotei wszystkie trzy będą koncentrować się na justify-content.

  3. Jeśli chcesz zrobić img (i jego rodzeństwo) wyginają przedmioty, wtedy może być bardziej efektywne użycie skierowanego w kierunku kolumny, a nie skierowanego w kierunku rzędu, elastycznego pojemnika. W takim przypadku nie będziesz używał justify-content do poziomego centrowania. Będziesz musiał użyć align-items lub align-self. Dowiedz się więcej na temat osi głównej, właściwości osi poprzecznej i linii trasowania.