代码实现(某一侧固定,另外一侧自适应):html
<!DOCTYPE html> <html> <head> <title>Flex布局-一侧固定,另外一侧自适应</title> <style> .parent { display: flex; width: 500px; height: 200px; } .left { width: 100px; background: #f00; } .right { flex: 1; background: orange; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
代码实现(两侧固定,中间自适应):布局
<!DOCTYPE html> <html> <head> <title>Flex布局-左右两边固定,中间自适应</title> <style> .parent { display: flex; width: 500px; height: 200px; } .left { width: 50px; background: #f00; } .center { flex: 1; background: orange; } .right { width: 50px; background: #f00; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Flex布局-左右两边固定,中间自适应</title> <style> .parent { display: flex; width: 500px; height: 200px; } .left { flex: 1; height: 200px; background: #f00; } .center { flex: 1; height: 200px; background: orange; } .right { flex: 1; height: 200px; background: #f00; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Flex布局-左右两边固定,中间自适应</title> <style> .parent { display: flex; justify-content: center; align-items: center; width: 500px; height: 200px; background: yellow; } .child { height: 50px; width: 50px; } .left { background: #f00; } .center { background: orange; } .right { background: #f00; } </style> </head> <body> <div class="parent"> <div class="child left"></div> <div class="child center"></div> <div class="child right"></div> </div> </body> </html>