简单flex侧边栏布局

最新推荐文章于 2023-04-17 12:38:54 发布

还不下马受降

最新推荐文章于 2023-04-17 12:38:54 发布

阅读量653

点赞数

分类专栏： CSS_flex

本文链接：https://blog.csdn.net/weixin_43865846/article/details/116356977

版权

这篇博客介绍了如何利用Flex布局创建一个侧边栏，其中包含网址链接，点击后内容在iframe中显示。虽然目前的实现是简单的插入，导致点击链接会跳转到新页面，而非在iframe内加载。文章提到了利用`justify-content:center`和`align-content:center`两个Flex属性实现内容的垂直居中。

摘要由CSDN通过智能技术生成

flex侧边栏布局，侧边插入网址然后网页内容显示在ifram窗口内，但是只是简单的插入，所以当点击的时候跳转的链接就会进入新的页面，因为新的地址中并没有target属性。flex两个属性，快速垂直居中。：justify-conteng:center, align-content:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style >
        body{
    
            background-color: skyblue;
            display: flex;
            flex-direction:column;
           
        }
        .topbar {
    
            height: 50px; 
            width: 100%;
            background-color: rgb(39, 7, 114);
            display: flex;
            flex-direction: column;
            justify-content: space-around;

        }
        
        .sorce {<