[HTML/CSS] fiex속성 사용하여 가로로 3등분 하기

개발해놓은 결제로직 테스트를 위한

테스트페이지를 만들어보다가 다양한 경우의 수 테스트를 가로로 정렬해서 한눈에 보면 좋겠다고

생각해서 찾아보았다.

 

백엔드 개발자라서 html/css쪽은 잘 모르는데 flex속성으로 간단하게 정렬할수 있다는걸 알고 WOW

 

우선 각 table들을 div로 감싸고 

상위 div로 전체를 감싸준다.  

 

상위 div에는 "display: flex;" 속성을 주고

각 table을 감싼 div에는 "flex: 1"  속성을 주면 끝

 

 

<예제소스>

<div style="display: flex;">
	<div style="flex: 1">
		<form name="payForm1" action="" method="post" >
			<table>
				<tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                	<td></td>
                    <td></td>
                </tr>
			</table>
		</form>
	</div>
	<div style="flex: 1">
		<form name="payForm2" action="" method="post" >
            <table>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>         
        </form> 
	</div>
	<div style="flex: 1">
		<form name="payForm3" action="" method="post" >
			<table>
                <tr>
                	<td></td>
                	<td></td>
                </tr>
			</table>     	
    	</form>
	</div>
</div>

flex : 숫자 는 비율을 뜻함

3개의 div에 1을 선언하므로써 1:1:1 똑같은 비율로 정렬

 

반응형에서 사용하기 좋은 css속성인듯~

 

<결과화면>

참고문서

flex - CSS: Cascading Style Sheets | MDN