2016-10-16 4 views
0

을 포장하지?인 flexbox 나는 인 flexbox이를했습니다

내 코드 :

<template> 
    <div> 
     <bar :title="title"></bar> 
     <div class="Row Center"> 
      <div class="Profile" v-if="!loading"> 
       <div class="Profile__body"> 
        <div class="Profile__body__title"> 
         <h1>{{ user.name }} {{ user.last_name }}</h1> 
        </div> 

        <div class="Profile__body__content"> 
         <p>Mobiel: {{ user.mobile }}</p> 
        </div> 

        <div class="Profile__body__content"> 
         <p>Email: {{ user.email }}</p> 
        </div> 

        <div class="Profile__body__content"> 
         <p>Functie: {{ user.function }}</p> 
        </div> 

        <div class="Profile__body__content" v-if="user.about"> 
         <p>Over Mij: {{ user.about }}</p> 
        </div> 

        <div class="Profile__body__content"> 
         <p>Corporatie: {{ user.corporation.name }}</p> 
        </div> 
       </div> 
      </div> 

      <div class="Loader" v-if="loading"> 
       <grid-loader :loading="loading" :color="color" :size="size"></grid-loader> 
      </div> 
     </div> 
    </div> 
</template> 

스타일러스 :

.Profile 
    panel(100%, 40%) 

.Profile__body 
    panel-body(100%, 100%) 

.Profile__body__title 
    space-between() 
    align-items center 
    border-bottom 1px solid $main-border-color 
    & > h1 
    margin-left 10px 

.Profile__body__content 
    margin 10px 
    flex-wrap wrap 


.Row 
    display flex 
    max-width 1000px 
    margin auto 

.Center 
    display flex 
    align-items center 
    justify-content center 

panel(height = 375, width = 100%, padding = 0px) 
    margin-top 50px 
    margin-bottom 10px 
    padding padding 
    background: $main-text-color 
    height height 
    width width 
    border 1px solid $main-border-color 

panel-body(min-width = 300px, height = 375px, width = 35%) 
    flex-column() 
    min-width min-width 
    height height 
    width width 

어떤 아이디어가? 인 flexbox으로 문제가되지 않습니다

답변

4

, 당신은 word-break: break-all

.el { 
 
    display: flex; 
 
} 
 
p { 
 
    width: 50px; 
 
    border: 1px solid black; 
 
    word-break: break-all; 
 
}
<div class="el"> 
 
    <p>looooooooooooooooooooooooooooorem</p> 
 
</div>

+0

감사를 사용해야합니다! 너는 최고야! – Jamie

0
.Grid { 
    display: flex; 
    flex-flow: row; 
    flex-wrap: wrap; 
} 
+0

이 코드가 OP에 도움이되는 이유에 대한 설명을 추가하십시오. 이렇게하면 미래의 시청자가 배울 수있는 답을 제공하는 데 도움이됩니다. 자세한 내용은 [답변]을 참조하십시오. –

+0

display : flex; - 플렉스 컨테이너를 정의합니다. 주어진 값에 따라 인라인 또는 블록. 모든 직접적인 하위 항목에 대해 플렉스 컨텍스트를 사용할 수 있습니다. –

+0

자세한 내용을 알고 싶으면 다음 링크를 확인하십시오. -https : //css-tricks.com/snippets/css/a-guide-to-flexbox/ –